Stop Rebuilding UI
Previous: Wide Spacing
Next: Dashed Separator

With Margins

Separator with direct margins using my-6 applied to the separator element itself for precise spacing control built with shadcn/ui

Space-y is convenient but sometimes you need explicit control. This React Separator uses my-6 (24px vertical margins) applied directly to the separator element, not the parent container. Built with shadcn/ui and Radix UI, direct margins give precise spacing control independent of sibling elements—perfect when sections have different spacing needs or when mixing separators with other components that shouldn't inherit space-y. The separator owns its spacing territory.

With Margins preview

Scroll to load preview

Installation

Tight Spacing

Minimal space-y-1 separator spacing

Default Spacing

Standard space-y-4 separator spacing

Wide Spacing

Generous space-y-8 separator spacing

Inset Separator

Separator with horizontal margins

Basic Separator

Simple horizontal separator

Divider

Alternative divider component

FAQ

Was this page helpful?

Sign in to leave feedback.

Wide Spacing

Separator with wide spacing using space-y-8 for generous layouts with maximum breathing room between major sections built with shadcn/ui

Dashed Separator

A dashed horizontal separator using border-dashed with bg-transparent for informal or temporary visual divisions