Separator

Powered by

Base UIShadcn UI

Installation

When to use

Separators provide visual or semantic content separation. Use this decision tree:

Usage

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

<Separator />

Variants

The Separator supports three visual weight variants via the variant prop, mapping to theme border tokens:

<Separator variant="subtle" />
<Separator variant="default" />
<Separator variant="strong" />

Orientation

Use orientation="vertical" to separate inline content. A vertical separator stretches to match the height of its flex row automatically — you don't need to give the container a fixed height. Outside a flex/grid layout, set an explicit height via className (e.g. className="h-6").

<div className="flex items-stretch gap-4">
  <div>Overview</div>
  <Separator orientation="vertical" />
  <div>Activity</div>
</div>

Parent-hover pattern

Use Tailwind's group utility to change separator weight on hover:

<div className="group/row">
  <Separator className="group-hover/row:bg-border-strong" />
</div>

Anatomy

The Separator component provides visual content division:

Separator
├── Base UI Separator primitive
├── Orientation: horizontal (default) | vertical
├── Variant: default | subtle | strong
├── ARIA role: separator
├── Visual styling: border token-based line
└── Semantic meaning for screen readers

Props

Accessibility

• By default (decorative={true}) the separator renders as role="none" with aria-hidden, so screen readers skip it — appropriate for purely visual dividers.
• Pass decorative={false} to render a semantic role="separator" with aria-orientation="horizontal" | "vertical" when the divider conveys meaning.
• Separators have no keyboard interactions.

Credits

• We use Base UI for the separator component.
• We take our inspiration from Shadcn UI for the separator style.