Separator
A thin rule that visually or semantically divides content — horizontal or vertical, decorative by default.
- Status
- Since
0.1.0- Accessibility pattern
- ARIA separator
Last updated
VegaStack UI
An open-source design system.
Install
Add Separator from the VegaStack registry. The CLI verifies the item's integrity hash before writing it.
pnpm dlx shadcn@latest add @vegastack/separatorUsage
import { Separator } from "@/components/ui/separator";
<Separator />;Examples
Rules in context
A horizontal rule between blocks of content, plus inline vertical dividers between links. The
top horizontal rule (<Separator />) is decorative — it's hidden from assistive tech because
the heading and paragraph already convey the grouping. The inline vertical dividers use
decorative={false} so screen readers announce each separator boundary. Vertical separators need
a parent with height (e.g. a flex row).
VegaStack UI
An open-source design system.
Orientation
Pass orientation="vertical" to divide along the cross axis. The parent must provide height — place
it inside a flex row.
Playground
Flip the orientation and the decorative flag, then copy the generated JSX.
<Separator />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
decorative | boolean | true | Whether the separator is purely visual. When true (the default) it is
hidden from assistive tech (role="presentation", aria-hidden) since the
surrounding layout already conveys the grouping. Set to false when the
divider carries semantic meaning (e.g. separating menu sections) so screen
readers announce it as a separator. |
orientation | "horizontal" | "vertical" | 'horizontal' | Axis the separator divides along. horizontal renders a 1px-tall full-width
rule; vertical renders a 1px-wide full-height rule. |
Data attributes and CSS variables on Separator
| Attribute | Values |
|---|---|
data-slot | "separator" |
Accessibility
- Decorative by default (
decorativeistrue): the separator is hidden from assistive tech (role="presentation",aria-hidden="true") because the surrounding layout already conveys the grouping. This avoids redundant "separator" announcements. - Set
decorative={false}when the divider carries meaning — e.g. between sections of a menu or toolbar — so screen readers announce it as aseparatorwith the correctaria-orientation. - Built on Base UI's accessible
Separator, which managesroleandaria-orientation.
| Attribute | Value |
|---|---|
role | separator (semantic) / presentation (decorative) |
aria-orientation | horizontal | vertical (semantic only) |
data-orientation | horizontal | vertical |
| Contract | States tested |
|---|---|
| Behaviour | default |
| Accessibility | native-or-base-ui-semantics, browser-accessibility-test |
| Visual | default |