A thin line that separates content into sections. Horizontal or vertical, four colours.
A divider separates content into sections so the page is easier to scan. Built on the Base UI Separator.
Mobile · 375px
Installation
npx shadcn@latest add @dga/dividerUsage
import { Divider } from "@/components/ui/divider";
<Divider />
<Divider orientation="vertical" />Props
Prop
Type
Accessibility
- Renders
role="separator"witharia-orientation, so screen readers announce the break between sections. - If the line is purely visual (for example between items that are already grouped), pass
role="none".
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).
Deviations from DGA
| Item | DGA original | Ours | Reason |
|---|---|---|---|
| Divider: colours | Neutral, Primary, Alpha-white and White, with no colour tokens in the export | neutral → border-neutral-secondary, primary → border-primary, alpha-white → border-oncolor-transparent-30, white → icon-oncolor (white in both modes) | Mapped to the closest semantic border tokens. border-white flips to black in dark mode, so white uses a token that stays white. |