Shadcn.io is not affiliated with official shadcn/ui
Horizontal Separator
A horizontal separator line dividing vertical content sections with default styling and space-y spacing
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.
Horizontal Separator preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.