Separator

Installation#

$ pnpm dlx shadcn@latest add https://www.prfct.dev/r/separator.json

Usage#

import { Separator } from "@/components/ui/separator"

<Separator />
<Separator orientation="vertical" />

A separator is 1px of the border token. Horizontal separators fill their container's width; vertical ones stretch to the height of their flex row, so give the row a height (h-5) and the separators follow.

Examples#

Toolbar groups#

Vertical separators split related controls into groups without adding boxes around them. When a separator should be shorter than its row, set its height and align it with data-vertical:self-center — the variant is needed to override the default stretch.

Lists#

Between rows of a list or settings panel, separators do the work of borders without doubling up on the container's edge.

With a label#

For an or between alternatives, use FieldSeparator. It composes two separators around a label and needs no background, so it sits correctly on any surface.

Decorative#

Separators are semantic by default. When one only exists for rhythm — between inline metadata, for example — mark it decorative so screen readers don't announce it.

<Separator orientation="vertical" decorative />

Guidelines#

When to use#

• To divide a surface into groups whose relationship isn't already clear from spacing or headings.
• Between groups of toolbar controls, menu sections and list rows.
• Between inline metadata where commas or bullets would be noisy.

When not to use#

• Where whitespace alone would separate the groups. Space is the quieter tool — reach for it first.
• As the edge of a surface — cards, dialogs and tables already draw their own borders.
• To separate sections of a page that have headings; the heading is the separator.

Prefer space, then lines#

prfct layouts get their structure from the spacing scale. Add a separator only when grouping by space would need so much of it that the layout falls apart, or when items are too dense to separate any other way.

Stay on the border token#

Separators use bg-border, the subtle structural color. Don't darken them to create emphasis — if a division needs to be stronger, it probably needs a heading or more space instead.

Accessibility#

prfct's separator renders a <div role="separator"> with aria-orientation, so assistive technology can announce a boundary between groups. It is not focusable and has no keyboard interaction.

• Semantic vs decorative. Keep the default role when the separator marks a real boundary between groups of content. Use decorative when it is purely visual: it renders role="none" and drops aria-orientation, which that role can't carry.
• Non-text contrast. The border token is intentionally subtle and isn't required to meet 3:1 — a separator never carries information on its own. Don't rely on one as the only indicator of a state change.

API reference#

Separator#

Renders a <div>. Accepts every prop of Base UI Separator.