Separator

uistable

Separator — extracted 1:1 from WEM-App.

npx shadcn add @krawma/separator

npm: radix-ui@^1.6.1 · registry: @krawma/utils

Preview

Above

Below

Depends on

utils

Purpose

A thin divider between content or groups of controls, horizontally or vertically.

Anatomy

A single Radix Separator. orientation="horizontal" (default) or "vertical"; decorative (default true) controls whether it's exposed to assistive tech.

Style

No variants — a 1px token --border line. Set orientation for direction and add margins via className.

Behavior & functionality

Static. Vertical separators need a parent with a defined height (e.g. a flex row).

Accessibility

Decorative by default (role="none"), which is correct for purely visual dividers.
If the separator conveys a real semantic boundary (e.g. between toolbar groups), set decorative={false} so it's exposed as a separator role.

Do / Don't

✅ Use orientation="vertical" inside flex rows (give the row a height).
❌ Don't use a separator to add spacing — use margin/padding for that.