Make your AI a shadcn expert
Previous: Default Spacing
Next: Wide Spacing

Tight Spacing

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

Keep related rows grouped. This React Separator uses gap-1 so the line divides without inserting a section-sized pause. Built with shadcn/ui and Radix UI. Perfect for list items, settings rows, and mobile stacks where vertical space is scarce.

Tight Spacing preview

Scroll to load preview

Installation

Default Spacing

Standard gap-4 separator spacing

Wide Spacing

Generous gap-8 separator spacing

Separator with Margins

Direct margins on separator element

List Separator

Separators between list rows

Horizontal Separator

Simple horizontal separator

Card

Card container with sections

FAQ

Was this page helpful?

Sign in to leave feedback.

Default Spacing

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

Wide Spacing

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

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