Separator

PreviewCode

LightStackBlitz ↗StackBlitz ↗StackBlitz ↗

Magnificent Four

4 tokens, rebalanced weekly.

Overview

Holdings

Holders

Magnificent Four

4 tokens, rebalanced weekly.

Overview

Holdings

Holders

Magnificent Four

4 tokens, rebalanced weekly.

Overview

Holdings

Holders

Installation

CLIManual

npmpnpmyarnbun

npx shadcn@latest add @edmi-ui/separator

pnpm dlx shadcn@latest add @edmi-ui/separator

yarn dlx shadcn@latest add @edmi-ui/separator

bunx shadcn@latest add @edmi-ui/separator

Pick your package manager above; the choice is remembered. Add the @edmi-ui registry first, see Getting started.

CLIManual

npmpnpmyarnbun

npx shadcn-vue@latest add @edmi-ui/separator

pnpm dlx shadcn-vue@latest add @edmi-ui/separator

yarn dlx shadcn-vue@latest add @edmi-ui/separator

bunx shadcn-vue@latest add @edmi-ui/separator

Pick your package manager above; the choice is remembered. Add the @edmi-ui registry first, see Getting started.

CLIManual

npmpnpmyarnbun

npx shadcn-svelte@latest add https://viandwi24.github.io/edmi-ui/r/svelte/separator.json

pnpm dlx shadcn-svelte@latest add https://viandwi24.github.io/edmi-ui/r/svelte/separator.json

yarn dlx shadcn-svelte@latest add https://viandwi24.github.io/edmi-ui/r/svelte/separator.json

bunx --bun shadcn-svelte@latest add https://viandwi24.github.io/edmi-ui/r/svelte/separator.json

Pick your package manager above; the choice is remembered. Add the @edmi-ui registry first, see Getting started.

Usage

import { Separator } from "@/components/ui/separator";

<div className="w-72">
  <div className="space-y-1">
    <h4 className="text-sm font-medium">Magnificent Four</h4>
    <p className="text-[13px] text-muted-foreground">
      4 tokens, rebalanced weekly.
    </p>
  </div>
  <Separator className="my-4" />
  <div className="flex h-5 items-center gap-4 text-sm">
    <span>Overview</span>
    <Separator orientation="vertical" />
    <span>Holdings</span>
    <Separator orientation="vertical" />
    <span>Holders</span>
  </div>
</div>

<script setup lang="ts">
import { Separator } from "@/components/ui/separator";
</script>

<template>
  <div class="w-72">
    <div class="space-y-1">
      <h4 class="text-sm font-medium">Magnificent Four</h4>
      <p class="text-[13px] text-muted-foreground">4 tokens, rebalanced weekly.</p>
    </div>
    <Separator class="my-4" />
    <div class="flex h-5 items-center gap-4 text-sm">
      <span>Overview</span>
      <Separator orientation="vertical" />
      <span>Holdings</span>
      <Separator orientation="vertical" />
      <span>Holders</span>
    </div>
  </div>
</template>

<script lang="ts">
  import { Separator } from "$lib/components/ui/separator";
</script>

<div class="w-72">
  <div class="space-y-1">
    <h4 class="text-sm font-medium">Magnificent Four</h4>
    <p class="text-[13px] text-muted-foreground">4 tokens, rebalanced weekly.</p>
  </div>
  <Separator class="my-4" />
  <div class="flex h-5 items-center gap-4 text-sm">
    <span>Overview</span>
    <Separator orientation="vertical" />
    <span>Holdings</span>
    <Separator orientation="vertical" />
    <span>Holders</span>
  </div>
</div>

Component source

registry/ui/separator.tsx

import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
import { cn } from "cn";

function Separator({
  className,
  orientation = "horizontal",
  ...props
}: SeparatorPrimitive.Props) {
  return (
    <SeparatorPrimitive
      data-slot="separator"
      orientation={orientation}
      className={cn(
        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
        className,
      )}
      {...props}
    />
  );
}

export { Separator };

registry/ui/separator/Separator.vue

<script setup lang="ts">
import type { SeparatorProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { Separator } from 'reka-ui'
import { cn } from '@/registry/edmi/lib/utils'

const props = withDefaults(defineProps<
  SeparatorProps & { class?: HTMLAttributes['class'] }
>(), {
  orientation: 'horizontal',
  decorative: true,
})

const delegatedProps = reactiveOmit(props, 'class')
</script>

<template>
  <Separator
    data-slot="separator"
    v-bind="delegatedProps"
    :class="cn('shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch', props.class)"
  />
</template>

registry/ui/separator/index.ts

export { default as Separator } from "./Separator.vue";

src/lib/registry/ui/separator/separator.svelte

<script lang="ts">
  import { Separator as SeparatorPrimitive } from "bits-ui";
  import { cn } from "$lib/utils.js";

  let {
    ref = $bindable(null),
    class: className,
    "data-slot": dataSlot = "separator",
    ...restProps
  }: SeparatorPrimitive.RootProps = $props();
</script>

<SeparatorPrimitive.Root
  bind:ref
  data-slot={dataSlot}
  class={cn(
    "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
    className
  )}
  {...restProps}
/>

src/lib/registry/ui/separator/index.ts

import Root from "./separator.svelte";

export {
  Root,
  //
  Root as Separator,
};

Expand

API

Prop	Type	Default
orientation	horizontal | vertical	horizontal

✦ Edmi additions

• Uses --border; Base UI data-orientation selectors instead of Radix decorative.