shadcn.io is an independent project built on shadcn/ui
Continue with sits at the start of the row, and a horizontal line runs from it to the end. The label keeps its width as the row grows.
Lead with the label when it introduces the block below, such as another way to sign in. A heading in a Card is clearer when those words title a whole section. In React, Base UI draws the line and not the space around it.
Installation
Anatomy
Usage
<div className="flex w-full max-w-sm items-center gap-2">
<span className="shrink-0 text-muted-foreground text-xs">
Continue with
</span>
<Separator className="flex-1" />
</div>FAQ
How is the label pinned to the start?
The span comes first with shrink-0, then a Separator with flex-1. The row is flex items-center gap-2, so the line runs to the end and the words keep their width.
Why does flex-1 matter on the Separator?
Separator includes shrink-0. flex-1 is merged after that class, and cn() keeps flex-1, which sets shrink too. The line then uses the space left after the label.
How is Continue with styled?
The span text is Continue with, with text-xs and text-muted-foreground. Change the text there. A long label leaves little room for the line.
Should this label be a heading?
This demo uses a span. Use a heading element when the words belong in the page outline, and keep shrink-0 on it.
API Reference
Separator
No extra props in this demo. The rest is on the Separator page.
