Separator

1import { Separator } from "@/components/ui/separator"23export function Example() {4  return (5    <div className="text-sm font-normal tracking-wide">6      <div className="space-y-1">7        <h4 className="text-foreground">arctis/ui</h4>8        <p className="text-muted-foreground">9          A set of components you can customize, extend, and build on.10        </p>11      </div>12      <Separator className="my-4" />13      <div className="flex h-5 items-center gap-4 text-foreground">14        <div>Blog</div>15        <Separator orientation="vertical" />16        <div>Docs</div>17        <Separator orientation="vertical" />18        <div>Source</div>19      </div>20    </div>21  )22}

1import { Separator } from "@/components/ui/separator"23export function Example() {4  return (5    <div className="text-sm font-normal tracking-wide">6      <div className="space-y-1">7        <h4 className="text-foreground">arctis/ui</h4>8        <p className="text-muted-foreground">9          A set of components you can customize, extend, and build on.10        </p>11      </div>12      <Separator className="my-4" />13      <div className="flex h-5 items-center gap-4 text-foreground">14        <div>Blog</div>15        <Separator orientation="vertical" />16        <div>Docs</div>17        <Separator orientation="vertical" />18        <div>Source</div>19      </div>20    </div>21  )22}

1import { Separator } from "@/components/ui/separator"23export function Example() {4  return (5    <div className="flex h-5 items-center justify-center gap-4 text-sm font-normal tracking-wide text-foreground">6      <div>Blog</div>7      <Separator orientation="vertical" />8      <div>Docs</div>9      <Separator orientation="vertical" />10      <div>Source</div>11    </div>12  )13}

1import { Separator } from "@/components/ui/separator"23export function Example() {4  return (5    <div className="flex items-stretch gap-4 text-sm font-normal tracking-wide">6      <div className="grid gap-0.5">7        <div className="text-foreground">Settings</div>8        <div className="text-muted-foreground">Preferences</div>9      </div>10      <Separator orientation="vertical" />11      <div className="grid gap-0.5">12        <div className="text-foreground">Account</div>13        <div className="text-muted-foreground">Profile & security</div>14      </div>15      <Separator orientation="vertical" />16      <div className="grid gap-0.5">17        <div className="text-foreground">Help</div>18        <div className="text-muted-foreground">Support & docs</div>19      </div>20    </div>21  )22}

1import { Separator } from "@/components/ui/separator"23const items = [4  { label: "Item 1", value: "Value 1" },5  { label: "Item 2", value: "Value 2" },6  { label: "Item 3", value: "Value 3" },7]89export function Example() {10  return (11    <div className="text-sm font-normal tracking-wide">12      {items.map((item, index) => (13        <div key={item.label}>14          {index > 0 ? <Separator /> : null}15          <div className="flex items-center justify-between py-2">16            <span className="text-foreground">{item.label}</span>17            <span className="text-muted-foreground">{item.value}</span>18          </div>19        </div>20      ))}21    </div>22  )23}