With Margins

Separator with my-6 vertical margins on the element itself for precise React spacing independent of sibling gap

Let the line own its pause. This React Separator uses my-6 instead of a parent gap so spacing stays attached to the rule when siblings do not share one flex rhythm. Built with shadcn/ui and Radix UI. Perfect when a separator sits between mixed components that should not inherit a common gap.

With Margins preview

Scroll to load preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/separator-with-margins.json

npx shadcn@latest add https://www.shadcn.io/r/separator-with-margins.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/separator-with-margins.json

bunx shadcn@latest add https://www.shadcn.io/r/separator-with-margins.json

Tight Spacing

Minimal gap-1 separator spacing

Default Spacing

Standard gap-4 separator spacing

Wide Spacing

Generous gap-8 separator spacing

Inset Separator

Separator with horizontal inset

Horizontal Separator

Simple horizontal separator

Section Divider

Titled section breaks

With Margins

With Margins preview

Installation

Related Components

Tight Spacing

Default Spacing

Wide Spacing

Inset Separator

Horizontal Separator

Section Divider

FAQ

When should I use margins instead of gap?

How do I set top and bottom separately?

Do separator margins collapse?

Can I use negative margins?

Should margins change by breakpoint?

Can I combine vertical and horizontal margins?