Separator

A dividing line, horizontal or vertical.

Danger zone

Actions here cannot be undone.

Docs

API

Support

Props

Prop	Values	Default	Description
`orientation`	`"horizontal"`, `"vertical"`	`"horizontal"`	Which way the line runs.
`decorative`	boolean	`true`	When `false`, exposes it as a real separator to screen readers.
`className`	string	`""`	Appended after the component's own classes.

Common patterns

<Separator className="my-6" />

// Vertical needs a height from its parent
<div className="flex h-5 items-center gap-3">
  <span>Docs</span>
  <Separator orientation="vertical" />
  <span>API</span>
</div>

Notes

Most dividers are decoration: the layout already communicates the split, and announcing "separator" again is noise. That is why decorative defaults to true, which sets role="none". Pass decorative={false} only when the line is the only thing marking a boundary.

A vertical separator has no height of its own — it stretches to its parent. If it seems to be missing, the parent has no height.