shadcn.io is not affiliated with official shadcn/ui
Separator examples · With Text
With Text Left Separator for React
A label at the start of a row with a separator running to the end, to introduce the content below.
Lead with the label, then the line. Continue with sits at the start and a Separator with flex-1 runs to the end of the row, so the eye moves on to the block below. Use it for section intros and category labels.
Preview
Installation
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.
Related
- With Text Center SeparatorCentered text between two separators, the
- With Text Right SeparatorA separator running to a More link at the
- Horizontal SeparatorA horizontal separator that divides a
- Default Spacing SeparatorA horizontal separator in a flex column
- Section Divider SeparatorA horizontal separator between two titled
- Standard CardA basic card with a title, a description