Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Separator - Tight Spacing
Separator with tight spacing using space-y-1 for compact layouts with minimal whitespace between sections built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes content needs to breathe—other times it needs to be compact. This React Separator uses space-y-1 (4px) for minimal vertical spacing between sections, creating dense layouts where every pixel counts. Built with shadcn/ui and Radix UI, tight spacing works perfectly for list items, table-like data, compact cards, or mobile interfaces where screen real estate is precious. The separator provides visual division without wasting space.
Section 1
Section 2
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Default Spacing
Standard space-y-4 separator spacing
Wide Spacing
Generous space-y-8 separator spacing
Separator with Margins
Direct margins on separator element
Basic Separator
Simple horizontal separator
Divider
Alternative divider component
Card
Card container with sections
Questions you might have
React Separator - Simple Line
A minimal horizontal separator line with no surrounding content showing basic usage and default styling
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