Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Separator - Simple Line
A minimal horizontal separator line with no surrounding content showing basic usage and default styling
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes you just need a line—nothing more, nothing less. This React Separator displays minimal horizontal dividing line with default styling and no surrounding content. Built with shadcn/ui Separator and Radix UI primitives, the simple line demonstrates base component—perfect for understanding default behavior, testing separator styling, integrating into custom layouts, as building block, or any scenario where you need basic horizontal division without additional context or configuration.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Horizontal Separator
Separator with content above and below
Section Divider
Separator between titled sections
Vertical Separator
Vertical orientation separator
In Navigation
Separators between nav links
Card
Card with internal dividers
Dialog
Modal with section divisions
Questions you might have
React Separator - Section Divider
Horizontal separator dividing titled content sections with headers and descriptive text for structured layouts
React Separator - Tight Spacing
Separator with tight spacing using space-y-1 for compact layouts with minimal whitespace between sections built with shadcn/ui