Skip to content
txbrendan/ui

Separator

beta

A thin line that divides content, horizontal or vertical.

Preview

horizontal

Profile

Your name, photo, and bio.

Notifications

Email and push settings.

vertical

SettingsBillingSign out

label

or

Install

  1. 1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.

    npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"

  2. 2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.

    npx shadcn@latest add @txbrendan/theme

  3. 3. Add the component.

    npx shadcn@latest add @txbrendan/separator

Use it for

  • Dividing groups that belong to different topics: sections of a settings panel, the account links and the sign-out link in a menu.
  • Use orientation='vertical' between items in a row, like a toolbar or a list of links.
  • Leave it announced when the break matters to the reading order. Add aria-hidden when the line only adds visual rhythm.

Avoid it for

  • Adding space. Use gap, margin, or padding instead.
  • A line between every item in a list. Use divide-y on the list instead.
  • A labeled divider, like 'or' between two sign-in options. A separator cannot hold text. Use two separators with a <span> between them.
  • Separating items inside a menu, select, or toolbar. Use that component's own separator part.

Props

  • orientation

    Which way the line runs. Sets aria-orientation and data-orientation.

    "horizontal" | "vertical" · default "horizontal"

  • className

    Extra classes. Later classes win, so className='h-4 self-center' gives a vertical line a fixed height.

    string

  • aria-hidden

    Hides a purely decorative line from screen readers.

    boolean

  • render

    Render prop. Swaps the <div> for another element.

    ReactElement

  • children

    Not allowed. TypeScript rejects content inside a separator.

    never

Accessibility

  • Renders a <div> with role="separator" and aria-orientation, so screen readers announce a break between groups.
  • It is not focusable. Keyboard users move past it.
  • When the line is only decoration, add aria-hidden. Screen readers then skip it instead of saying "separator".
  • Text inside a separator is not read out, so TypeScript rejects children.
  • The line uses the border token. It is decoration, so the theme does not hold it to a contrast minimum. Never use it as the only boundary of a control.

Examples

Between two sections

<div className="flex flex-col gap-4">
  <p>Profile</p>
  <Separator />
  <p>Notifications</p>
</div>

Vertical, between links in a row

<nav aria-label="Account" className="flex items-center gap-3 text-sm">
  <a href="/settings">Settings</a>
  <a href="/billing">Billing</a>
  <Separator orientation="vertical" className="h-4 self-center" />
  <a href="/logout">Sign out</a>
</nav>

Decoration only

<div className="flex flex-col gap-3">
  <h2 className="font-semibold">Usage</h2>
  <Separator aria-hidden />
  <p className="text-sm text-muted-foreground">1,204 of 5,000 requests</p>
</div>

A divider with a label

<div className="flex items-center gap-3 text-xs text-muted-foreground">
  <Separator className="flex-1" aria-hidden />
  <span>or</span>
  <Separator className="flex-1" aria-hidden />
</div>