Make your AI a shadcn expert
Previous: Tight Spacing
Next: With Margins

Wide Spacing

Separator with wide flex gap-8 spacing for generous React layouts and major Next.js section breaks

Give major sections a pause. This React Separator sits in a flex column with gap-8 so the line reads as a chapter break, not a list rule. Built with shadcn/ui and Radix UI. Perfect for marketing pages, article divisions, and any layout where hierarchy matters more than density.

Wide Spacing preview

Scroll to load preview

Installation

Tight Spacing

Minimal gap-1 separator spacing

Default Spacing

Standard gap-4 separator spacing

Separator with Margins

Direct margins on separator element

Horizontal Separator

Simple horizontal separator

Inset Separator

Separator with horizontal inset

Section Divider

Titled section breaks

FAQ

Was this page helpful?

Sign in to leave feedback.

Tight Spacing

Separator with tight flex gap-1 spacing for compact React lists and dense Next.js layouts

With Margins

Separator with my-6 vertical margins on the element itself for precise React spacing independent of sibling gap

Get Pro — Save 33%·--:--:--→