Separator
A thin rule that divides content horizontally or vertically. A slot mode floats any element on the line with start, center, or end alignment.
Playground
<Separator slot>
<Button size="sm">Continue</Button>
</Separator>Preview
The default render is a hairline on the border-soft color. Horizontal separators span the full width; vertical ones stretch to the height of their flex row.
<div>
<div className="pb-2 text-sm font-medium">Espresso UI</div>
<div className="text-sm text-muted-foreground">
An open-source UI component library.
</div>
<Separator className="my-4" />
<div className="flex h-5 items-center gap-4 text-sm text-muted-foreground">
<span>Blog</span>
<Separator orientation="vertical" />
<span>Docs</span>
<Separator orientation="vertical" />
<span>Source</span>
</div>
</div>Installation
npx shadcn@latest add https://espresso-base-ui.vercel.app/r/separator.jsonUsage
import { Separator } from "@/components/ui/separator"<div>
<p>Above the line.</p>
<Separator className="my-4" />
<p>Below the line.</p>
</div>Vertical
Set orientation="vertical" inside a flex row – the rule self-stretches to the row height, so give the container an explicit height or aligned content.
<div className="flex h-16 items-center gap-4">
<div className="text-sm text-muted-foreground">Left</div>
<Separator orientation="vertical" />
<div className="text-sm text-muted-foreground">Middle</div>
<Separator orientation="vertical" />
<div className="text-sm text-muted-foreground">Right</div>
</div>Slot
Pass slot and children to float content on top of the rule; slotAlign places it at the start, center (default) or end, inset by a fixed margin from the edge.
<Separator slot slotAlign="start">
<Button size="sm">Continue</Button>
</Separator>
<Separator slot slotAlign="center">
<Button size="sm">Continue</Button>
</Separator>
<Separator slot slotAlign="end">
<Button size="sm">
<Check />
Finished
</Button>
</Separator>Vertical slot
Slot mode composes with orientation="vertical" too – the separator fills the container height and slotAlign maps to top, middle and bottom.
<div className="flex h-64 items-stretch gap-20">
<Separator orientation="vertical" slot slotAlign="start">
<Button size="sm">Continue</Button>
</Separator>
<Separator orientation="vertical" slot slotAlign="center">
<Button size="sm">Continue</Button>
</Separator>
<Separator orientation="vertical" slot slotAlign="end">
<Button size="sm">Continue</Button>
</Separator>
</div>API reference
Separator wraps the Base UI Separator primitive, so it accepts className and every primitive prop in addition to the ones below.
Separator
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | Axis of the rule. Horizontal fills the available width; vertical is a 1px column that self-stretches in a flex row. |
| slot | boolean | false | Switches to slot mode: the rule becomes an absolutely-positioned hairline behind the children you pass. |
| slotAlign | "start" | "center" | "end" | "center" | Where the slotted content sits along the rule. Start and end are inset by a fixed margin from the edge. |
| slotClassName | string | – | Extra classes for the inner span that wraps the slotted content. |
| children | ReactNode | – | Content rendered on top of the rule. Only used when slot is true. |
Accessibility & styling hooks
The root renders role="separator" with the correct aria-orientation via the Base UI primitive; in slot mode the visible hairline is aria-hidden so assistive tech only announces one separator. The root exposes data-slot="separator" plus the primitive's data-horizontal / data-vertical state attributes, slot mode adds data-align with the active alignment, and the content wrapper carries data-slot="separator-slot" – target any of these from CSS. A separatorSlotVariants cva helper is also exported.