shadcn.io is an independent project built on shadcn/ui
Account sits above a horizontal line, and Billing sits below it. The line carries its own vertical margin, and the parent does not add a gap.
Put the margin on the line when the neighbors do not share one spacing rhythm. A parent gap is simpler, and a Card is clearer, when they do. In React, Base UI leaves the gap to the parent.
Installation
Anatomy
Usage
<div className="w-full max-w-sm">
<p className="text-sm">Account</p>
<Separator className="my-6" />
<p className="text-sm">Billing</p>
</div>FAQ
When should I use margins instead of gap?
When the line sits between mixed siblings that shouldn't share one gap, or when only this break needs a different pause. Prefer a gap when every child belongs to the same stack.
How do I set top and bottom separately?
Use mt-8 mb-4 for an uneven pause: more above to close the previous section, less below to attach the next heading.
Do separator margins collapse?
In a block container like this one, yes: my-6 next to a heading with mt-4 gives 24 pixels, not 40. Inside a flex or grid container margins don't collapse, and they add to the gap.
Can I use negative margins?
Avoid them: negative margins overlap content and break at other type sizes. Adjust the positive value instead.
API Reference
Separator
No extra props in this demo. The rest is on the Separator page.
