Separator
A one-pixel rule that visually or semantically separates content, in either orientation, built on Base UI.
- Status
- Since
0.1.0- Accessibility pattern
- decorative by default
Last updated
Install
Configure registry credentials first using the Quickstart. Before copying this item or any transitive registry dependency, verify the signed manifest and save the exact bytes for Separator before installation. Retain the digest printed by this command.
pnpm exec vegastack-design verify separatorInstall with the pinned shadcn CLI. Bare shadcn does not verify VegaStack signature or integrity.
pnpm dlx shadcn@4.21.0 add @vegastack/separatorRun the exact offline --post-write command printed by the preflight, using its saved item path and independently retained --expected-integrity digest. Use the saved preflight for every transitive registry dependency too; stop on any mismatch before using the components.
Usage
import { Separator } from "@/components/ui/separator";
<Separator />;Examples
Vertical
Use orientation="vertical" for a vertical separator. It stretches to the height of its flex row,
so the row — not the separator — sets the length.
Menu
Vertical separators between menu entries with descriptions.
List
Horizontal separators between list rows.
- Item 1
- Value 1
- Item 2
- Value 2
- Item 3
- Value 3
RTL
A horizontal separator spans the full inline size, so a right-to-left document needs no change.
API Reference
Separator adds no props of its own — it accepts everything the underlying element or Base UI primitive accepts (className, ref, ARIA attributes, event handlers).
Accessibility
- Base UI's Separator renders
role="separator"witharia-orientation, so assistive technology announces the division rather than inferring it from a border. - It is never focusable and never a control: a separator that also does something is a button or a resize handle, not this component.
- A separator that merely decorates a layout should be hidden from assistive technology with
aria-hiddenon the element that owns the decoration, so the rule is not announced twice. - Colour alone never carries the meaning of a division — the content on each side must stand on its own.
| Contract | States tested |
|---|---|
| Behaviour | default |
| Accessibility | native-or-base-ui-semantics, browser-accessibility-test |
| Visual | default |
Do / Don't
Deviations
Upstream's file plus packages/ui/upstream/patches/separator.patch. Every hunk:
- DOC-2 —
cnis imported from@vegastack/design, and the file carries the registry provenance header. Nothing else differs fromvendor/shadcn/4.21.0/ui/separator.tsx.