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" />

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

• Renders as role="separator" with aria-orientation="horizontal" | "vertical".
• Base UI note: the Radix decorative prop is accepted for API parity but ignored — role="separator" is always applied. If you truly need a decorative divider that screen readers skip, use a plain <div aria-hidden="true"> with your own styling. See MIGRATION.md.
• 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.