Loading...
Loading...
> Visually or semantically separates content.
1import { Separator } from "@/components/ui/separator"
1<div>2 <div>Content above</div>3 <Separator />4 <div>Content below</div>5</div>
1<Separator />
1<div className="flex items-center gap-4">2 <div>Left</div>3 <Separator orientation="vertical" />4 <div>Right</div>5</div>
1<Separator decorative />
1<Separator decorative={false} />
1<div>2 <div>Item 1</div>3 <Separator />4 <div>Item 2</div>5 <Separator />6 <div>Item 3</div>7</div>
1<Separator className="bg-primary" />
1<Separator className="h-[2px]" />
1<div className="relative">2 <div className="absolute inset-0 flex items-center">3 <Separator />4 </div>5 <div className="relative flex justify-center text-xs">6 <span className="bg-background px-2">Or</span>7 </div>8</div>
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | Direction of the separator. |
| decorative | boolean | true | If true, role is 'none'. If false, role is 'separator' with aria-orientation. |
| className | string | - | Additional CSS classes for custom styling. |
✓ Use Separator when:
✗ Don't use when:
Best Practices: