Shadcn.io is not affiliated with official shadcn/ui
With Margins
Separator with direct margins using my-6 applied to the separator element itself for precise spacing control built with shadcn/ui
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.
With Margins preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
Wide Spacing
Separator with wide spacing using space-y-8 for generous layouts with maximum breathing room between major sections built with shadcn/ui
Inset Separator
Inset separator with horizontal margins using mx-8 creating visual indentation for contained or nested content sections built with shadcn/ui