shadcn.io is an independent project built on shadcn/ui
Chapter one sits above a horizontal line, and Chapter two sits below it. The line is 4 pixels tall, thicker than the usual hairline.
Use the thick line for a chapter break, not for every row in a list. A double hairline is quieter, and a Card is louder, when you need a different weight. In React, Ark UI draws the line and not the space around it.
Installation
Anatomy
Usage
<div className="flex w-full max-w-sm flex-col gap-6">
<p className="text-sm">Chapter one</p>
<Separator className="data-horizontal:h-1" />
<p className="text-sm">Chapter two</p>
</div>FAQ
When should I use a thick separator?
For a rare, important break: a new chapter, a new settings category. Don't thicken every line or the page turns into stripes.
Why not just pass className h-1?
The component sets its height with an orientation variant, which comes after a plain h-1 in the stylesheet, so the line would stay one pixel. Use the same variant and the merge replaces the default height.
Here that's data-horizontal:h-1.
Should thick separators use a different color?
Usually not: the thickness is the emphasis. A brand color can work for one special break, not for every section.
Does a thick line need more space around it?
Yes. Pair it with gap-6 or gap-8, as here, so the line doesn't sit on the text.
API Reference
Separator
No extra props in this demo. The rest is on the Separator page.
