Separator

Separator is a visual rule that groups related elements while preserving the surrounding flow. It wraps Radix’s SeparatorPrimitive.Root, which renders an HTML <div> with the correct ARIA semantics for the chosen mode.

Reach for Separator when whitespace alone is not enough — for example between two columns in a card footer, between the header and body of a settings panel, or between groups of navigation items. If the sections already sit in distinct containers (different cards, different tabs), whitespace is usually enough and Separator just adds noise.

Import

import { Separator } from "@unkey/ui";

Horizontal

The default orientation. Renders as a 1px full-width rule. The parent container controls width.

Vertical

For vertical dividers, set orientation="vertical". The parent must give the separator a height — either explicitly (h-6) or implicitly via its flex/grid context — otherwise the rule collapses.

Accessibility

Separator defaults to decorative={true}, which means screen readers skip it entirely — appropriate when the rule is purely visual and the surrounding semantic structure (headings, landmarks, lists) already conveys the grouping.

Set decorative={false} when the rule is the only thing that distinguishes sections that would otherwise read as one block. Radix then renders it with role="separator" and the appropriate aria-orientation, so screen readers announce the boundary.

Props