Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: Default Spacing
Next: With Margins

Wide Spacing

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

Cramped layouts make users feel rushed—generous spacing creates calm. This React Separator uses space-y-8 (32px) for wide vertical spacing that gives content room to breathe and improves focus. Built with shadcn/ui and Radix UI, wide spacing works beautifully for marketing pages, article layouts, hero sections, or any interface where visual hierarchy and readability trump space efficiency. The separator becomes a meaningful pause between distinct content areas.

Wide Spacing preview

Scroll to load preview

Installation

Tight Spacing

Minimal space-y-1 separator spacing

Default Spacing

Standard space-y-4 separator spacing

Separator with Margins

Direct margins on separator element

Basic Separator

Simple horizontal separator

Inset Separator

Separator with horizontal margins

Hero Section

Large hero section layout

FAQ

Was this page helpful?

Sign in to leave feedback.

Default Spacing

Separator with default spacing using space-y-4 for balanced layouts providing comfortable breathing room between sections built with 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