Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Separator - Default Spacing
Separator with default spacing using space-y-4 for balanced layouts providing comfortable breathing room between sections built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Default spacing exists for a reason—it just works for most cases. This React Separator uses space-y-4 (16px) for comfortable vertical spacing that balances visual separation with space efficiency. Built with shadcn/ui and Radix UI, default spacing provides clear section boundaries without feeling cramped or wasteful. Perfect for general content sections, forms, settings pages, or any layout where you want solid visual structure without overthinking spacing decisions.
Section 1
Section 2
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Tight Spacing
Minimal space-y-1 separator spacing
Wide Spacing
Generous space-y-8 separator spacing
Separator with Margins
Direct margins on separator element
Basic Separator
Simple horizontal separator
Inset Separator
Separator with horizontal margins
Divider
Alternative divider component
Questions you might have
React Separator - Tight Spacing
Separator with tight spacing using space-y-1 for compact layouts with minimal whitespace between sections built with shadcn/ui
React Separator - Wide Spacing
Separator with wide spacing using space-y-8 for generous layouts with maximum breathing room between major sections built with shadcn/ui