shadcn.io is an independent project built on shadcn/ui
Awarded to sits above two horizontal lines stacked close together, and For outstanding work sits below them. They read as one double rule.
Use the double rule for a formal close, such as a certificate. One thicker line is simpler, and a Card is better, when the break is just another section. In React, Ark UI leaves the gap to the parent.
Installation
Anatomy
Usage
<div className="flex w-full max-w-sm flex-col gap-4">
<p className="text-sm">Awarded to</p>
<div className="flex flex-col gap-1">
<Separator />
<Separator />
</div>
<p className="text-sm">For outstanding work</p>
</div>FAQ
When should I use a double line?
For a rare formal break: awards, legal closings, formal footers. A single thick line is the modern equivalent. Don't double every section.
How tight should the two lines be?
gap-1 (4 pixels) keeps them together as one unit. At gap-2 they start to look like two separate lines.
Can the two lines differ?
Yes: give each Separator its own classes, such as a thicker top line. Two equal one-pixel lines are the traditional look.
Is a double line heavier than a thick line?
A similar weight with a different character. Two one-pixel lines with a 4 pixel gap are about as tall as a 4 pixel line, but read as formal rather than bold.
API Reference
Separator
No extra props in this demo. The rest is on the Separator page.
