Separator

1import {
2  Example,
3  ExampleWrapper,
4} from "@/registry/bases/radix/components/example"
5import { Separator } from "@/registry/bases/radix/ui/separator"
6 
7export default function SeparatorExample() {
8  return (
9    <ExampleWrapper>
10      <SeparatorHorizontal />
11      <SeparatorVertical />
12      <SeparatorVerticalMenu />
13      <SeparatorInList />
14    </ExampleWrapper>
15  )
16}
17 
18function SeparatorHorizontal() {
19  return (
20    <Example title="Horizontal">
21      <div className="style-lyra:text-xs/relaxed flex flex-col gap-4 text-sm">
22        <div className="flex flex-col gap-1">
23          <div className="leading-none font-medium">shadcn/ui</div>
24          <div className="text-muted-foreground">
25            The Foundation for your Design System
26          </div>
27        </div>
28        <Separator />
29        <div>
30          A set of beautifully designed components that you can customize,
31          extend, and build on.
32        </div>
33      </div>
34    </Example>
35  )
36}
37 
38function SeparatorVertical() {
39  return (
40    <Example title="Vertical">
41      <div className="style-lyra:text-xs/relaxed flex h-5 items-center gap-4 text-sm">
42        <div>Blog</div>
43        <Separator orientation="vertical" />
44        <div>Docs</div>
45        <Separator orientation="vertical" />
46        <div>Source</div>
47      </div>
48    </Example>
49  )
50}
51 
52function SeparatorVerticalMenu() {
53  return (
54    <Example title="Vertical Menu">
55      <div className="style-lyra:text-xs/relaxed flex items-center gap-2 text-sm md:gap-4">
56        <div className="flex flex-col gap-1">
57          <span className="font-medium">Settings</span>
58          <span className="text-muted-foreground text-xs">
59            Manage preferences
60          </span>
61        </div>
62        <Separator orientation="vertical" />
63        <div className="flex flex-col gap-1">
64          <span className="font-medium">Account</span>
65          <span className="text-muted-foreground text-xs">
66            Profile & security
67          </span>
68        </div>
69        <Separator orientation="vertical" />
70        <div className="flex flex-col gap-1">
71          <span className="font-medium">Help</span>
72          <span className="text-muted-foreground text-xs">Support & docs</span>
73        </div>
74      </div>
75    </Example>
76  )
77}
78 
79function SeparatorInList() {
80  return (
81    <Example title="In List">
82      <div className="style-lyra:text-xs/relaxed flex flex-col gap-2 text-sm">
83        <dl className="flex items-center justify-between">
84// … truncated