Separator
Hairlines between groups, vertical or with a label like "or".
Installation
npx shadcn@latest add @quireui/separatorUsage
<Separator />
<Separator label="or" />
<Separator orientation="vertical" />Use it between groups that belong apart, and plain spacing everywhere else.
Vertical
orientation="vertical" divides a row, like a toolbar where the destructive action sits apart from the rest. It stretches to the height of the row.
With a label
label puts text on the line: centred for a choice like "or", or at the start with align="start" for a small section title.
Workspace name, logo and invoice numbering live above.
Delete the workspace and all invoices.
Accessibility
It is a real separator to screen readers, not decoration. A labelled one reads its label.
Separators take no focus and have no keys.
API reference
Separator
A hairline between groups. Screen readers know it as a separator, not decoration.
Prop
Type
Also takes every prop of Base UI's Separator. Style it with [data-slot="separator"].