Separator

Horizontal

The default orientation. Renders a full-width 1px line.

<p>Section one content goes here.</p>
<Separator />
<p>Section two content goes here.</p>

Vertical

Set orientation="vertical" to render a 1px tall vertical line. The separator takes the full height of its container, so place it inside a flex row with an explicit height.

<div className="flex items-center gap-4 h-6">
<span>Files</span>
<Separator orientation="vertical" />
<span>Edit</span>
<Separator orientation="vertical" />
<span>View</span>
</div>

Decorative vs semantic

By default decorative is true, which adds aria-hidden="true" so screen readers skip the element. Set decorative={false} when the separator conveys meaningful structure — this switches to role="separator" with aria-orientation.

{/* Decorative (default) — hidden from assistive technology */}
<Separator />

{/* Semantic — announces the division to screen readers */}
<Separator decorative={false} />
<Separator decorative={false} orientation="vertical" />

Props