Make your AI a shadcn expert
Previous: Inset Separator
Next: Tight Spacing

Default Spacing

Separator with default flex gap-4 spacing for balanced React layouts that need comfortable breathing room between sections

Start with a 16px rhythm. This React Separator sits in a flex column with gap-4, the same spacing official shadcn examples use for stacked content. Built with shadcn/ui and Radix UI. Perfect for forms, settings, and general page sections when you do not want to invent a custom scale.

Default Spacing preview

Scroll to load preview

Installation

Tight Spacing

Minimal gap-1 separator spacing

Wide Spacing

Generous gap-8 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.

Inset Separator

Inset React separator with horizontal margins and a width override so the line stays inside the parent instead of overflowing

Tight Spacing

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

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