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

Props

Prop	Type	Default	Description
`orientation`	'horizontal' \| 'vertical'	`'horizontal'`	Direction the separator runs. Horizontal spans full width; vertical spans full height of its container.
`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.
`className`	string	`—`	Additional Tailwind classes to merge — commonly used for margin (e.g. my-4) or color overrides.
`...rest`	SeparatorPrimitive.Root props	`—`	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 is reflected via aria-orientation so the direction is conveyed to assistive tech.