Separator
shadcn/ui
Horizontal or vertical dividing line. Semantic by default, decorative when needed.
@/components/ui/separatorOrientations
| orientation | Preview | Token |
|---|---|---|
| horizontal (default) | Recently viewed tickets No tickets viewed today. | border-border · h-px · w-full |
| vertical | TicketsPartnersSettings | border-border · w-px · h-full |
In context — settings panel
Account settings
Profile
Name, email, avatar
Notifications
Email, in-app alerts
Billing
Plan, invoices
Security
Password, 2FA
In context — vertical in toolbar
Usage contexts
| Context | Orientation | Examples |
|---|---|---|
| Section divider | horizontal | Between settings sections, card content blocks |
| Inline group | vertical | Between breadcrumb items, toolbar segments |
| List item divider | horizontal | Between Item rows (see Item component) |
| Menu separator | horizontal | Inside DropdownMenu, Menubar — use MenubarSeparator instead |
Props
| Prop | Type | Description |
|---|---|---|
| orientation | "horizontal" | "vertical" | Direction of the line. Default: "horizontal" |
| decorative | boolean | When true, aria-hidden is set — purely visual, not semantic |
| className | string | Extend via className — width, color, margin |
Inside DropdownMenu or Menubar, use their built-in separator sub-components instead — they handle ARIA roles automatically.
On this page