Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: Tight Spacing
Next: Wide Spacing

Default Spacing

Separator with default spacing using space-y-4 for balanced layouts providing comfortable breathing room between sections built with shadcn/ui

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.

Default Spacing preview

Scroll to load preview

Installation

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

FAQ

Was this page helpful?

Sign in to leave feedback.

Tight Spacing

Separator with tight spacing using space-y-1 for compact layouts with minimal whitespace between sections built with shadcn/ui

Wide Spacing

Separator with wide spacing using space-y-8 for generous layouts with maximum breathing room between major sections built with shadcn/ui