Shadcn.io is not affiliated with official shadcn/ui
Horizontal Separator
A horizontal React separator that divides stacked content with the default shadcn/ui line, Tailwind gap spacing, and Radix orientation for Next.js layouts
Divide stacked content with a single horizontal line. This React Separator uses the default orientation from shadcn/ui and Radix UI, with flex column gap spacing instead of margin collapse. Perfect for article sections, settings groups, card bodies, and any vertical layout that needs a clear break without extra borders.
Horizontal Separator preview
Installation
Related Components
Vertical Separator
Vertical line between columns
Section Divider
Separator between titled sections
Simple Line
Minimal separator only
List Separator
Horizontal separators in a list
In Navigation
Vertical separators in nav
Card
Card with section divisions
FAQ
Was this page helpful?
Sign in to leave feedback.
Horizontal ScrollArea
Horizontal ScrollArea for image galleries and content carousels with horizontal-only scrolling and explicit ScrollBar component built with shadcn/ui
In Navigation
Vertical React separators between navigation links using a fixed-height nav row and shadcn/ui Separator for decorative inline dividers