Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Wide Spacing Separator for React

A horizontal line between Features and Testimonials, with a 32 pixel gap on each side of the line.

Features sits above a horizontal line, and Testimonials sits below it. The gap on each side is 32 pixels, so the line reads as a chapter break.

Use the wide gap for major sections on a marketing page. Tabs fit better when people should switch sections instead of scrolling past a line. In React, Base UI draws the line and not the space around it.

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

Anatomy

Separator anatomy: horizontal, vertical

Usage

<div className="flex w-full max-w-sm flex-col gap-8">
  <p className="text-sm">Features</p>
  <Separator />
  <p className="text-sm">Testimonials</p>
</div>

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.

API Reference

Separator

No extra props in this demo. The rest is on the Separator page.

All 20 separator examples