Component · 21

Separator

A thin ruled line between groups of content. It is a real separator for assistive technology, horizontal or vertical. Built on Base UI.

Horizontal

Account

Manage your profile.

Billing

Invoices and payment methods.

tsx

<div>
  <h3>Account</h3>
  <p>Manage your profile.</p>
  <Separator />
  <h3>Billing</h3>
  <p>Invoices and payment methods.</p>
</div>

Vertical

Inside a flex row it stretches to the row's height.

Docs

Blog

Changelog

tsx

<div className="flex items-center gap-4">
  <span>Docs</span>
  <Separator orientation="vertical" />
  <span>Blog</span>
  <Separator orientation="vertical" />
  <span>Changelog</span>
</div>

Props

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	Which way the line runs. A vertical one stretches to the height of its flex row.
role	string	"separator"	Pass "presentation" for a line that is purely decorative and should be skipped by screen readers.
className	string	-	Merged with the component's own class.

Between two sections of a page, prefer a heading: it gives screen reader users something to navigate by. A separator only marks that two things are different.