Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Separator examples · Spacing

Wide Spacing Separator for React

A horizontal separator in a flex column with a 32 pixel gap for major section breaks.

Framework
UI library

Give major sections a pause. This React Separator sits in a flex column with gap-8, so the line reads as a chapter break rather than a list rule. Use it for landing pages, article divisions and any layout where hierarchy matters more than density.

Preview

Preview width

Features

Testimonials

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

When should I use wide spacing?

Between major page regions, such as Features and Testimonials, or chapters of an article. If people have to scroll past an empty band to reach the next related paragraph, the gap is too wide.

Can spacing be too wide?

Yes. gap-8 is a generous section break; from gap-12 up, related content starts to look disconnected. Keep that for large landing pages.

Should wide spacing shrink on mobile?

Usually: gap-4 lg:gap-8 keeps phones usable and desktops airy.

Does wide spacing improve hierarchy?

Yes, together with headings. The whitespace is the pause and the line is the period, but neither replaces a real heading.

Do I still need a line at gap-8?

Not always: some landing pages use whitespace alone. Keep the line on formal or settings-like pages where a rule is part of the style.

What content types benefit most?

Long articles, landing page bands and documentation topics. Forms, tables and dashboards want tighter spacing.

All 20 separator examples