Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Separator examples · Spacing

Default Spacing Separator for React

A horizontal separator in a flex column with a 16 pixel gap on each side.

Framework
UI library

Start with a 16 pixel rhythm. This React Separator sits in a flex column with gap-4, the spacing the Separator docs use for stacked content. Use it for forms, settings and general page sections when you don't want to invent a custom scale.

Preview

Preview width

Profile details

Notification preferences

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

Why is gap-4 the default spacing?

16 pixels sits in the middle of the Tailwind spacing scale: enough to separate sections without wasting a phone screen.

When should I leave the default?

Tighten to gap-1 or gap-2 for lists and data rows; open to gap-6 or gap-8 for large page sections. If the default feels slightly off, move one step on the scale rather than inventing a one-off value.

Should spacing stay consistent across the app?

Pick two or three steps, such as gap-2, gap-4 and gap-8, and reuse them. Many different values make a page feel accidental.

Is gap-4 right for form sections?

Yes, between groups such as Personal info and Preferences. Inside a group, the Field components already set a tighter rhythm between label and control.

Should default spacing change by breakpoint?

Rarely: gap-4 works on phones and desktops. If a section needs more air on large screens, use gap-4 lg:gap-8.

Can I mix gap with padding?

Yes. Padding is the container's inset and the gap is the space between children; they add up rather than overlap. A card with p-6 and gap-4 is a common pairing.

All 20 separator examples