Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Horizontal Separator
A horizontal separator line dividing vertical content sections with default styling and space-y spacing
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Visual breaks matter—separators create breathing room between content. This React Separator creates horizontal dividing line between vertical content sections using default orientation. Built with shadcn/ui Separator and Radix UI primitives, horizontal lines organize content—perfect for dividing paragraphs, separating list sections, creating content boundaries, footer divisions, or any vertical layout where visual separation improves scanability without heavy borders or excessive whitespace.
Above the separator
Below the separator
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Vertical Separator
Vertical line between columns
Section Divider
Separator between titled sections
Simple Line
Minimal separator only
In Navigation
Vertical separators in nav
Card
Card with section divisions
Dialog
Modal with content sections
Questions you might have
React Scroll Area - Horizontal ScrollArea
Horizontal ScrollArea for image galleries and content carousels with horizontal-only scrolling and explicit ScrollBar component built with shadcn/ui
React Vertical Separator
A vertical separator line dividing horizontal content columns using orientation vertical prop with flex layout