Separator
Overview
The SSeparator component visually and semantically separates content sections. It renders a horizontal or vertical line, optionally with a label centered (or aligned) along it. Use it to divide related content blocks, group menu items, or structure form sections.
For layout-level spacing between sections, prefer the SCard or UnoCSS spacing utilities; use SSeparator when a visible dividing line aids comprehension.
Usage
Features
- 📏 Orientation — Switch between
horizontalandverticallayouts. - 🏷️ Label support — Render text or custom content inside the separator via the
labelprop or default slot. - ↔️ Alignment — Position the label at
start,center, orend. - 〰️ Border styles — Choose
solid,dashed, ordottedline styles. - 📐 Size scaling — Six sizes (
xs–2xl) control label typography and spacing. - ♿ Accessibility —
role="separator"witharia-orientation;decorativeprop removes the element from the accessibility tree for purely visual dividers. - 🎨 Per-slot overrides —
uiprop andclassallow fine-grained styling ofrootandlabelslots. - 🌐 RTL aware — Label positioning and translation automatically adjust for right-to-left layouts.
Demos
Basic
Radix Primitives
An open-source UI component library.
API
Aria Layer
4Separator
Props
| Prop | Type | Default | Description |
|---|---|---|---|
class | ClassValue | — | Additional class names applied to the root element. |
size | ThemeSize | — | Visual size of the component. |
ui | Partial<SeparatorUi> | — | Per-slot class overrides for the component. |
align | Align | — | Align. |
border | SeparatorBorder | — | Border. |
label | string | — | Label text rendered by the component. |
labelProps | SeparatorLabelProps | — | Properties forwarded to the label element. |
orientation | DataOrientation | — | Orientation of the component.
Either `vertical` or `horizontal`. Defaults to `horizontal`. |
decorative | boolean | — | Whether or not the component is purely decorative. <br>When `true`, accessibility-related attributes are updated so
that that the rendered element is removed from the accessibility tree. |
SeparatorCompact
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Label text rendered by the component. |
labelProps | SeparatorLabelProps | — | Properties forwarded to the label element. |
orientation | DataOrientation | — | Orientation of the component.
Either `vertical` or `horizontal`. Defaults to `horizontal`. |
decorative | boolean | — | Whether or not the component is purely decorative. <br>When `true`, accessibility-related attributes are updated so
that that the rendered element is removed from the accessibility tree. |
Slots
| Slot Name | Parameters | Description |
|---|---|---|
label | — | Custom content for the label slot. |
SeparatorLabel
SeparatorRoot
Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | DataOrientation | — | Orientation of the component.
Either `vertical` or `horizontal`. Defaults to `horizontal`. |
decorative | boolean | — | Whether or not the component is purely decorative. <br>When `true`, accessibility-related attributes are updated so
that that the rendered element is removed from the accessibility tree. |
Notes
Architecture and benchmark differences
VeanUI splits Separator into an Aria layer (@vean/aria/separator) that owns SeparatorRoot (role/aria/orientation), SeparatorLabel, and SeparatorCompact (composition + label visibility logic), and a styled layer (@vean/ui) that owns the scv() variant recipe (size/orientation/align/border) and class injection via provideSeparatorUi. This follows the shadcn/ui headless/styled separation.
| Aspect | VeanUI | Ant Design Divider | Element Plus ElDivider | MUI Divider | Mantine Divider | shadcn/ui Separator |
|---|---|---|---|---|---|---|
| Architecture | Aria + styled split, SeparatorUiSlot (root/label) + Compact aggregation | single component | single component | single component | single component | Aria + styled |
| Label | label prop + default slot; align (start/center/end) | orientation prop | content-position | — | labelPosition | — |
| Border style | border (solid/dashed/dotted) | dashed prop | border-style prop | — | variant | — |
| Size scaling | size (xs–2xl) controls label typography + spacing | — | — | — | size | — |
| Decorative | decorative → role="none" | — | — | — | — | decorative |
| RTL | rtl:translate-x + logical start-* positioning | — | — | — | — | — |
Runtime cautions
- Vertical separators: labels are intentionally hidden when
orientation="vertical"because the label cannot be meaningfully positioned along a vertical line. If you need a label next to a vertical separator, place it outside the component. - Decorative mode: when
decorativeistrue, the element receivesrole="none"andaria-orientationis omitted so it is removed from the accessibility tree. Use this for purely visual dividers that screen readers should skip. - Full width / height: horizontal separators default to
w-fulland vertical separators toh-full. Wrap vertical separators in a flex container with a fixed height for correct rendering.
FAQ
When should I use decorative? Set decorative when the separator is purely visual and does not represent a semantic content boundary. This sets role="none", hiding it from screen readers. For content section dividers that convey meaning, leave decorative unset (defaults to role="separator").
Why is my label not showing on a vertical separator? Labels are intentionally suppressed for vertical orientations. Use a horizontal separator for labeled dividers, or place the label text outside the component.
How do I customize the label element’s attributes? Pass labelProps — it is forwarded directly to the SeparatorLabel element. For class overrides, use the ui.label slot instead.
How do I make the separator full-width? Horizontal separators are w-full by default. For vertical separators, ensure the parent container has a defined height; the separator uses h-full.