Components

Separator

A thin rule that visually or semantically divides content, available in horizontal and vertical orientations.

Basic usage

Drop a Separator between sections and add margin with className.

Comitor UI

A gold-and-ink component library.

Docs

Components

Tokens

Orientation

Use orientation="vertical" for inline dividers — the parent must define a height (e.g. h-5) so the rule has something to span.

Profile

Billing

Team

Decorative vs. semantic

By default separators are decorative and hidden from assistive tech. Set decorative={false} when the divide carries real meaning between groups of content.

Account settings

Notification preferences

Danger zone

Preset separators

Two components in the package are built on Separator with the right defaults already applied, so reach for them instead of hand-tuning margins:

ItemSeparator — a horizontal rule with my-0, for dividing rows inside an ItemGroup.
FieldSeparator — the “or” divider in a form. Without children it is a single absolutely-positioned rule; with children it renders two rules with the label between them, rather than laying an opaque background patch over a single one. That distinction matters: a patch has to guess the surface behind it, and --background and --card are the same white in the light palette but different in dark — so the patch approach looks fine until someone flips the theme.

Props

Prop	Type	Default	Description
`orientation`	'horizontal' \| 'vertical'	`'horizontal'`	Direction the separator runs. Horizontal is h-px w-full; vertical is w-px h-full, so the parent must have a height.
`decorative`	boolean	`true`	When true the divider is purely visual and removed from the accessibility tree. Set false to expose it as a semantic separator.
`asChild`	boolean	`false`	Radix Slot escape hatch — render the separator styling onto your own element (e.g. an <hr>) instead of a div.
`className`	string	`—`	Additional Tailwind classes to merge — commonly used for margin (e.g. my-4) or to change the fill from bg-border.
`...rest`	React.ComponentProps<typeof SeparatorPrimitive.Root>	`—`	All Radix Separator props are forwarded to the underlying element.

Accessibility

Built on Radix @radix-ui/react-separator, which manages roles and ARIA semantics for you.
With decorative (the default), the element is given role="none" so screen readers skip it.
With decorative={false}, it exposes role="separator" and announces the boundary between content groups.
The orientation always lands on the DOM as data-orientation, which is what the styling hangs off. aria-orientation is added only on a semantic separator that runs vertical — a decorative rule has no ARIA at all, and horizontal is the implicit default for the role, so Radix leaves it off.
The rule is filled with bg-border, the decorative boundary token. It sits deliberately below the 3:1 non-text contrast threshold — enough to group content for the eye, and never enough to stand in for the edge of a control. Use control-edge when you are actually outlining something interactive.