Steph Huynh● Primitives / Separator
Separator.
Separator is a minimal 1px rule for horizontal or vertical splits. On this site it divides mobile sheet sections and separates inline clusters in the header.
How the primitive behaves
Separator is presentational. It inherits border color from tokens and adapts length to its parent flex or block layout. It should never be the only cue for critical information.
The header wraps a vertical separator in a short flex container so the rule matches the cap height of adjacent text without overriding component styles.
Source of truth
Wrapped from shadcn-svelte via $lib/system. Orientation defaults to horizontal when omitted.
Primitive roles
Section divider
Separates blocks of content horizontally without adding heavy chrome.
Inline divider
Vertical orientation splits items in a row, such as nav clusters in the header.
Rhythm helper
Works inside sheets and cards to group related links without new headings.
Anatomy
Horizontal
Block one
Block two
Vertical
Rule
A 1px border-colored line that stretches along the chosen axis.
Orientation
horizontal fills width; vertical fills height of its flex container.
Spacing
Margin classes on the instance control breathing room, as in my-2 or gap layouts.
Guidelines
- Use Separator when content needs a light divide, not when a section title would carry the hierarchy.
- Prefer horizontal separators between stacked groups inside sheets, cards, or doc examples.
- For vertical splits, wrap items in flex and set orientation="vertical" with an explicit height class when needed.
- Do not use Separator as a page-level hero divider; border-t on sections is enough at that scale.
- Keep the element decorative: surrounding content should still make sense if the rule is ignored.
In practice
Stacked groups in a panel?
Horizontal separator with modest vertical margin.
Items in one row?
Vertical separator inside a flex row.
Need a titled break?
Use a heading or MetadataLabel instead.
Full page section break?
Use border-t on the section, not this primitive alone.
Related primitives
Other primitives in the system, in the same order as the documentation sidebar.