Separator

1
import { Separator } from "~/components/ui/separator";
2

3
export default function SeparatorDemo() {
4
  return (
5
    <div class="flex max-w-sm flex-col gap-4 text-sm">
6
      <div class="flex flex-col gap-1.5">
7
        <div class="font-medium leading-none">shadcn/ui</div>
8
        <div class="text-muted-foreground">The Foundation for your Design System</div>
9
      </div>
10
      <Separator />
11
      <div>
12
        A set of beautifully designed components that you can customize, extend, and build on.
13
      </div>
14
    </div>
15
  );
16
}

1
import { Separator } from "~/components/ui/separator";
2

3
export default function SeparatorVerticalDemo() {
4
  return (
5
    <div class="flex h-5 items-center gap-4 text-sm">
6
      <div>Blog</div>
7
      <Separator orientation="vertical" />
8
      <div>Docs</div>
9
      <Separator orientation="vertical" />
10
      <div>Source</div>
11
    </div>
12
  );
13
}

1
import { Separator } from "~/components/ui/separator";
2

3
export default function SeparatorMenuDemo() {
4
  return (
5
    <div class="flex items-center gap-2 text-sm md:gap-4">
6
      <div class="flex flex-col gap-1">
7
        <span class="font-medium">Settings</span>
8
        <span class="text-muted-foreground text-xs">Manage preferences</span>
9
      </div>
10
      <Separator orientation="vertical" />
11
      <div class="flex flex-col gap-1">
12
        <span class="font-medium">Account</span>
13
        <span class="text-muted-foreground text-xs">Profile &amp; security</span>
14
      </div>
15
      <Separator orientation="vertical" class="hidden md:block" />
16
      <div class="hidden flex-col gap-1 md:flex">
17
        <span class="font-medium">Help</span>
18
        <span class="text-muted-foreground text-xs">Support &amp; docs</span>
19
      </div>
20
    </div>
21
  );
22
}

1
import { Separator } from "~/components/ui/separator";
2

3
export default function SeparatorListDemo() {
4
  return (
5
    <div class="flex w-full max-w-sm flex-col gap-2 text-sm">
6
      <dl class="flex items-center justify-between">
7
        <dt>Item 1</dt>
8
        <dd class="text-muted-foreground">Value 1</dd>
9
      </dl>
10
      <Separator />
11
      <dl class="flex items-center justify-between">
12
        <dt>Item 2</dt>
13
        <dd class="text-muted-foreground">Value 2</dd>
14
      </dl>
15
      <Separator />
16
      <dl class="flex items-center justify-between">
17
        <dt>Item 3</dt>
18
        <dd class="text-muted-foreground">Value 3</dd>
19
      </dl>
20
    </div>
21
  );
22
}