Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: Simple Line
Next: Default Spacing

Tight Spacing

Separator with tight spacing using space-y-1 for compact layouts with minimal whitespace between sections built with shadcn/ui

Sometimes content needs to breathe—other times it needs to be compact. This React Separator uses space-y-1 (4px) for minimal vertical spacing between sections, creating dense layouts where every pixel counts. Built with shadcn/ui and Radix UI, tight spacing works perfectly for list items, table-like data, compact cards, or mobile interfaces where screen real estate is precious. The separator provides visual division without wasting space.

Tight Spacing preview

Scroll to load preview

Installation

Default Spacing

Standard space-y-4 separator spacing

Wide Spacing

Generous space-y-8 separator spacing

Separator with Margins

Direct margins on separator element

Basic Separator

Simple horizontal separator

Divider

Alternative divider component

Card

Card container with sections

FAQ

Was this page helpful?

Sign in to leave feedback.

Simple Line

A minimal horizontal separator line with no surrounding content showing basic usage and default styling

Default Spacing

Separator with default spacing using space-y-4 for balanced layouts providing comfortable breathing room between sections built with shadcn/ui