Visual divider for separating content sections.
| Name | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | horizontal | Separator orientation |
| decorative | boolean | true | Whether the separator is decorative |
| Property | Token | CSS Variable | Description | |
|---|---|---|---|---|
| Background | color.border | var(--border) | Border color |
Default horizontal separator to divide content sections.
Content above the separator
Content below the separator
<div className="space-y-4"> <p>Content above</p> <Separator /> <p>Content below</p> </div>
Vertical separators for inline elements like navigation links.
<div className="flex h-6 items-center space-x-4 text-sm"> <span>Home</span> <Separator orientation="vertical" /> <span>Products</span> <Separator orientation="vertical" /> <span>About</span> <Separator orientation="vertical" /> <span>Contact</span> </div>
Separator with centered text, commonly used for 'OR' dividers in forms.
<div className="flex items-center gap-4"> <Separator className="flex-1" /> <span className="text-xs text-muted-foreground">OR</span> <Separator className="flex-1" /> </div>