Skip to content
werewolf-ui
Components

Separator

A thin line that splits content into groups: sections of a card, items in a toolbar, links in a footer. Horizontal by default; vertical between items in a row. label puts a word in the middle, such as or between two ways to sign in.

Preview

Account

Billing

Props

  • orientation
  • label
import { Separator } from "@/components/ui/separator"

<div className="flex w-full max-w-xs flex-col gap-md">
  <p className="text-sm text-text-primary">Account</p>
  <Separator />
  <p className="text-sm text-text-primary">Billing</p>
</div>

Usage

When to use

  • Split content into groups where spacing alone doesn't show where one ends: sections of a card, groups of menu items.
  • Split items in a row, such as links in a footer or buttons in a toolbar.

When not to use

  • Framing content on all sides. Use Card.
  • A line under every row of a list or table; rows have their own borders.
  • Naming a group. Write a heading.

Variants

orientation

horizontal splits stacked content; vertical splits items in a row, such as toolbar buttons.

  • Account

    Billing

    horizontaldefault

  • Docs
    Changelog
    Status

    vertical

import { Separator } from "@/components/ui/separator"

<div className="flex w-full max-w-xs flex-col gap-md">
  <p className="text-sm text-text-primary">Account</p>
  <Separator />
  <p className="text-sm text-text-primary">Billing</p>
</div>
<div className="flex items-center gap-md text-sm text-text-secondary">
  <span>Docs</span>
  <Separator orientation="vertical" />
  <span>Changelog</span>
  <Separator orientation="vertical" />
  <span>Status</span>
</div>

Examples

Between sections

Signed in as ada@example.com

Billing and invoices

import { Separator } from "@/components/ui/separator"

<div className="flex flex-col gap-lg">
  <p className="text-sm text-text-primary">Signed in as ada@example.com</p>
  <Separator />
  <p className="text-sm text-text-secondary">Billing and invoices</p>
</div>

In a row

Vertical, between links. It stretches to the height of the row.

Docs
Changelog
Status
import { Separator } from "@/components/ui/separator"

<div className="flex items-center gap-md text-sm text-text-secondary">
  <a href="#docs">Docs</a>
  <Separator orientation="vertical" />
  <a href="#changelog">Changelog</a>
  <Separator orientation="vertical" />
  <a href="#status">Status</a>
</div>

With a label

or between two ways to sign in. The label is read where it stands.

or
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"

<div className="flex w-full max-w-xs flex-col gap-lg">
  <Button variant="secondary">Continue with email</Button>
  <Separator label="or" />
  <Button variant="secondary">Continue with a passkey</Button>
</div>

Read by screen readers

Nothing else splits these two groups, so the line is a separator.

Your projects

Shared with you

import { Separator } from "@/components/ui/separator"

<div className="flex flex-col gap-md">
  <p className="text-sm text-text-primary">Your projects</p>
  <Separator decorative={false} />
  <p className="text-sm text-text-primary">Shared with you</p>
</div>

Do and don't

Do

  • Use spacing first; add a separator when spacing alone doesn't show where one group ends.
  • Give it room on both sides with the gap of its parent, one step larger than the gap inside each group.

Don't

  • Don't put a separator under every row of a list or table; rows have their own borders.
  • Don't use it to frame content on all sides; that is a Card.
  • Don't use it as a heading. A label is a word such as or; a group that needs a name gets a heading.

Props

NameTypeValuesDefaultDescription
orientationenumhorizontal | verticalhorizontalhorizontal splits stacked content; vertical splits items in a row, such as toolbar buttons.
decorativeboolean-trueHidden from screen readers. Set false when the line is the only thing that splits two groups.
labelnode--A word or two in the middle of a horizontal line: or. Keep it short; a group that needs a name gets a heading.

Anatomy

PartDescription
rootThe line: a 1px border in the divider color, the top border when horizontal (full width) and the start border when vertical (full height of the row).
wrapperWith label: the row that holds a line on each side of the label, gap-md. It takes the root's role and className.
lineWith label: each line, the top border in the divider color, sharing the width that is left.
labelWith label: 13px secondary text in the middle, on one line.

Accessibility

Role: none

  • Decorative by default: screen readers skip it, since headings and lists already tell them where groups start.
  • Set decorative={false} when the line is the only thing that splits two groups; it becomes a separator, and a vertical one says so with aria-orientation.
  • With a label, the text is read where it stands. Leave a labelled line decorative: a separator role hides the text inside it from screen readers.
  • A separator is never focusable and takes no keyboard input.

Install

npx shadcn add https://werewolf-ui.vercel.app/r/separator.json

This also adds styles/werewolf.css, the tokens every component uses, and any other component it needs. Import that file once in your root CSS, after @import "tailwindcss", with a path relative to that CSS file (from app/globals.css it is @import "../styles/werewolf.css").