Shadcn Separator: Dividers for React Layouts
The shadcn separator visually or semantically divides content, rendering the humble horizontal rule as a themeable, accessible react divider component. Styled with Tailwind CSS, it supports horizontal and vertical orientations and decides for you when a divider should be announced to assistive technology and when it is purely decorative.
Sixteen separator examples live on this page, which is more range than most people expect from a divider. Beyond plain lines you will find separators with centered text, icon separators in horizontal and vertical orientations, gradient border treatments in both directions, dashed and dotted styles, and spacing variations, all as copy-paste TypeScript snippets for Next.js projects.
What you get
- Both orientations: Horizontal rules for stacked content and vertical dividers for toolbars and inline metadata.
- Text separators: Lines with centered labels, the classic or continue with pattern on auth screens.
- Icon separators: Horizontal and vertical variants that place an icon at the midpoint of the line.
- Gradient borders: Fading gradient treatments in both orientations for softer section breaks.
- Style variations: Dashed, dotted, thick, and inset options so dividers can signal different levels of separation.
Implementation tips
- Give vertical separators height: A vertical divider needs a parent with a defined height or stretch alignment in flex layouts, otherwise it collapses invisibly.
- Use decorative mode by default: Most dividers are visual polish. Keep the decorative prop on so screen readers skip them, and remove it only for true thematic breaks.
- Prefer gap over separators: Whitespace often divides content more cleanly than a line. Reach for a separator when proximity alone is ambiguous.
- Build text separators with flex: Two flex-1 lines around a label is simpler and more robust than absolutely positioning text over a single rule.
- Match the muted palette: Dividers should use border or muted tokens, since high contrast lines fragment a layout instead of organizing it.
Where it fits in a dashboard
Separators do quiet structural work everywhere in an admin interface: between sections of a settings page, between a card header and its content, between groups in a dropdown menu, and between inline stats in a toolbar where vertical dividers keep counts readable.
The decorated variants have specific homes. Text separators split OAuth buttons from credential forms on login screens, and gradient separators soften section breaks on marketing style overview pages where a hard line would feel heavy.
Related components and patterns
Separators most often appear inside other components: dividing a Card into regions, splitting groups in a Dropdown Menu, or separating rows in an Item list. Vertical dividers commonly sit between actions in a Button Group or alongside a Breadcrumb trail in a page header.
When you find yourself separating collapsible sections repeatedly, an Accordion may express the structure better than lines alone.
Library support
The component tracks the shadcn/ui Separator docs and builds on the Radix UI Separator primitive, which handles the separator role, orientation attributes, and the decorative escape hatch.
Base UI provides an equivalent Separator component for projects on that stack, and since the visual layer here is plain Tailwind CSS, every variant on this page transfers between the two with no styling changes.