Separator
A hairline that means structure, in either direction.
@luc/uiExamples
Horizontal and vertical
One hairline, in either direction. Horizontal separates blocks in a column, vertical separates groups inside a row — and both are drawn from the same line token, so their weight never disagrees.
Above the rule
Below the rule
Left
Right
<Stack gap="md">
<Text variant="body">Above the rule</Text>
<Separator />
<Text variant="body">Below the rule</Text>
</Stack>
<Inline gap="md" align="center">
<Text variant="body">Left</Text>
<Separator orientation="vertical" className="h-4" />
<Text variant="body">Right</Text>
</Inline>The ornament variant
A short centred rule with a dot, for the one place a full-width line would read as a structural boundary rather than a pause: between a page's blocks, never inside one.
Forty-one instruments passed the liquidity screen.
The remaining nine were dropped for insufficient history.
<Separator variant="ornament" />Between rows
The other real use: a hairline between list rows instead of a border on every row. The list keeps one frame and the rows keep their rhythm.
AAPL
4.1%
MSFT
3.8%
NVDA
3.2%
<Panel>
<PanelBody className="py-0">
<Stack gap="none">
<Inline justify="between" className="py-2.5">…</Inline>
<Separator />
<Inline justify="between" className="py-2.5">…</Inline>
</Stack>
</PanelBody>
</Panel>Weight and spacing
Two things a caller can change about a hairline, and both are ordinary classes: a stronger line for a boundary that has to be seen, and tighter spacing where the content is already dense.
Default
Default
Stronger boundary
Stronger boundary
<Separator />
<Separator className="bg-line-strong" />Usage
import { Separator } from "@luc/ui";<Separator />
<Separator orientation="vertical" className="h-4" />A vertical rule has no intrinsic height inside a flex row, so it is given one.
Package setup — peer requirements, the stylesheet and the provider — is on installation.
API
Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.
| Export | Kind | Signature |
|---|---|---|
Separator | 4 documented props | ({ className, orientation, variant, ...props }: SeparatorProps) => import("@types/react").JSX.Element |
Separator props
Type: SeparatorProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
asChild?inherited | boolean | undefined | — | |
decorative?inherited | boolean | undefined | — | Whether or not the component is purely decorative. When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree. |
orientation?inherited | "horizontal" | "vertical" | undefined | — | Either `vertical` or `horizontal`. Defaults to `horizontal`. |
variant? | "line" | "ornament" | undefined | — | `line` for hairlines, `ornament` for a short centred rule. |
Guidelines
Do
- Use a separator where the structure changes: between page bands, between groups inside a row, between list rows that share one frame.
- Give a vertical rule a height (`className="h-4"`); inside a row it has nothing to stretch against.
- Reach for `variant="ornament"` when the break is a pause in reading rather than a boundary between regions.
Don't
- Do not use a rule to fix spacing: if the gap is wrong, the gap is wrong — a line in its place is decoration with a job it cannot do.
- Do not put one above and below every card in a grid; the grid's gap already separates them, and six rules make a table out of a grid.
- Do not rely on it to communicate grouping to assistive technology — a decorative separator is hidden on purpose.
Accessibility
The separator is decorative by default, which is right for a rule that states what the layout already says. `decorative={false}` makes it a real `role="separator"` carrying its orientation — worth doing when the line marks a genuine boundary between two groups rather than just separating space.
Family
Layout
Space, rhythm and the surfaces a page is made of.
10 documented entries in this family. Open the family index
Related