Divider
A thin line that separates content into sections. Horizontal or vertical, four colours.
Version 0.2.0 ·
Installation
bunx --bun shadcn@latest add @dga/dividerUsage
import { Divider } from "@/components/ui/divider";
<Divider />
<Divider orientation="vertical" />Built on the Base UI Separator.
Examples
Colours
neutral (default), primary, and alpha-white and white for brand fills.
Vertical
Set orientation="vertical" inside a flex row with a fixed height.
RTL
A line has no direction. Vertical dividers sit between items in the reading order.
Accessibility
- Renders
role="separator"witharia-orientation, so screen readers announce the break between sections. - If the line is purely visual, pass
role="none".
API Reference
Divider
Separates content into sections. Announced as a separator; pass role="none" if purely visual.
| Prop | Type | Default |
|---|---|---|
"alpha-white" | "neutral" | "primary" | "white"Colour. `alpha-white` and `white` are for dividers on brand fills. | "neutral" | |
| ||
"horizontal" | "vertical"The orientation of the separator. | "horizontal" | |
| ||
Also accepts every prop of the Base UI Separator (opens in a new tab).
Deviations from DGA
| Change | Reason |
|---|---|
Divider: colours | Mapped to the closest semantic border tokens. border-white flips to black in dark mode, so white uses a token that stays white. |
Contrast
No contrast pairs: this component is decorative. Content that carries meaning must not rely on it (WCAG 1.4.11 applies only to graphics needed to understand the content).