Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Separator - With Margins
Separator with direct margins using my-6 applied to the separator element itself for precise spacing control built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Space-y is convenient but sometimes you need explicit control. This React Separator uses my-6 (24px vertical margins) applied directly to the separator element, not the parent container. Built with shadcn/ui and Radix UI, direct margins give precise spacing control independent of sibling elements—perfect when sections have different spacing needs or when mixing separators with other components that shouldn't inherit space-y. The separator owns its spacing territory.
Section 1
Section 2
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Tight Spacing
Minimal space-y-1 separator spacing
Default Spacing
Standard space-y-4 separator spacing
Wide Spacing
Generous space-y-8 separator spacing
Inset Separator
Separator with horizontal margins
Basic Separator
Simple horizontal separator
Divider
Alternative divider component
Questions you might have
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
React Inset Separator
Inset separator with horizontal margins using mx-8 creating visual indentation for contained or nested content sections built with shadcn/ui