Separator
Visually or semantically separates content.
Made by shadcn
Loading component...
When to use
Separators provide visual or semantic content separation. Use this decision tree:
Installation
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:
| Variant | Token | Description |
|---|---|---|
default | bg-divider-default | Standard divider weight (default) |
subtle | bg-divider-subtle | Lighter weight for de-emphasized separation |
strong | bg-divider-strong | Heavier weight for emphasized separation |
<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
├── Radix Separator primitive
├── Orientation: horizontal (default) | vertical
├── Variant: default | subtle | strong
├── ARIA role: separator
├── Visual styling: border token-based line
└── Semantic meaning for screen readersProps
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "subtle" | "strong" | "default" | Visual weight of the separator |
orientation | "horizontal" | "vertical" | "horizontal" | Direction of the separator |
decorative | boolean | true | Whether the separator is purely visual |
className | string | — | Additional CSS classes |
Credits
Built by malinskibeniamin. The source code is available on GitHub.