Separator
A thin dividing line that visually or semantically separates content. Use it between sections of a list, groups of controls in a toolbar, or blocks of text. Renders horizontally by default; switch to vertical inside a flex row to divide inline items.
Horizontal
A functional separator between groups of content — not a surface edge. If what you want is to show that a panel is a panel, give it bg-card instead; a surface separates from the page by tone alone.
Account
Signed in as ada@example.com
Billing
Visa ending 4242
<div class="w-80">
<p class="text-sm font-medium">Account</p>
<p class="text-muted text-sm">Signed in as ada@example.com</p>
<Separator class="my-4" />
<p class="text-sm font-medium">Billing</p>
<p class="text-muted text-sm">Visa ending 4242</p>
</div>Vertical
orientation="vertical" spans its parent's full height, so the parent has to have one — a flex row with a set height, typically a toolbar.
<div class="flex h-9 items-center gap-3 text-sm">
<span>Draft</span>
<Separator orientation="vertical" />
<span>Edited 2h ago</span>
<Separator orientation="vertical" />
<span>3 collaborators</span>
</div>API
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal'|'vertical' | 'horizontal' | Direction of the divider. Horizontal spans full width; vertical spans full height and needs a sized parent. |
class | string | Additional Tailwind classes merged onto the divider (e.g. color or margin overrides). |