Separator

A thin divider that visually or semantically separates content, built on Radix UI's Separator primitive.

Install

npx shadcn@latest add https://atomx.acau.net/r/separator.json

Usage

Separator draws a one-pixel divider between groups of content. It is horizontal by default; pass orientation="vertical" to divide inline items — the vertical variant stretches to its parent's height, so the parent needs a defined height (for example a fixed-height flex row).

Separators are decorative by default (decorative is true), so they are hidden from assistive technology. When the divider conveys a real structural boundary, set decorative={false} to expose it with the separator role.

<div className="flex h-5 items-center gap-3 text-sm">
  <span>Profile</span>
  <Separator orientation="vertical" />
  <span>Billing</span>
</div>

Preview

Horizontal

Vertical

Props

Separator extends React.ComponentProps<typeof SeparatorPrimitive.Root>. All Radix Separator props are forwarded.