Separator

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

<Separator />

function Separator({
  className,
  orientation = "horizontal",
  decorative = true,
  ...props
}: React.ComponentProps<typeof SeparatorPrimitive.Root>)

<SeparatorPrimitive.Root
  decorative={decorative}
  orientation={orientation}
  className="shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px"
/>

<div>
  <div className="space-y-1">
    <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
    <p className="text-sm text-muted-foreground">
      An open-source UI component library.
    </p>
  </div>
  <Separator className="my-4" />
  <div className="flex h-5 items-center space-x-4 text-sm">
    <div>Blog</div>
    <Separator orientation="vertical" />
    <div>Docs</div>
    <Separator orientation="vertical" />
    <div>Source</div>
  </div>
</div>

<div className="flex h-5 items-center space-x-4">
  <div>Item 1</div>
  <Separator orientation="vertical" />
  <div>Item 2</div>
  <Separator orientation="vertical" />
  <div>Item 3</div>
</div>

<div className="space-y-1">
  <button className="w-full px-2 py-1.5 text-sm text-left">Profile</button>
  <button className="w-full px-2 py-1.5 text-sm text-left">Settings</button>
  <Separator className="my-1" />
  <button className="w-full px-2 py-1.5 text-sm text-left text-destructive">
    Logout
  </button>
</div>

<div className="space-y-4">
  <div className="text-sm">Item 1</div>
  <Separator />
  <div className="text-sm">Item 2</div>
  <Separator />
  <div className="text-sm">Item 3</div>
</div>

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
  </CardHeader>
  <Separator />
  <CardContent className="pt-6">
    <p>Content goes here</p>
  </CardContent>
  <Separator />
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

<Separator className="bg-red-500" />
<Separator className="my-8 h-px" />
<Separator orientation="vertical" className="mx-4 h-full w-px" />

<div>
  <section>
    <h2>Section 1</h2>
    <p>Content for section 1</p>
  </section>
  <Separator decorative={false} className="my-6" />
  <section>
    <h2>Section 2</h2>
    <p>Content for section 2</p>
  </section>
</div>