shadcn.io is not affiliated with official shadcn/ui
Separator examples · With Text
With Text Center Separator for React
Centered text between two separators, the OR divider between two sets of choices.
Split two equal choices with a labeled rule, like social sign-in and an email form. Two Separator lines with flex-1 sit on either side of a short OR, so they stay the same length as the row widens or narrows.
Preview
Installation
FAQ
How do the two lines stay equal?
Each Separator has flex-1, and the label is a span with shrink-0. The row is flex items-center gap-2, so the lines share the leftover space and the word keeps its width.
Why does flex-1 matter on a Separator?
Separator includes shrink-0. flex-1 is merged after that class, and cn() keeps flex-1, which sets shrink too. That is what lets each line get shorter than the row.
How is the centered label styled?
The span text is or, with text-xs, text-muted-foreground and uppercase. Change the text in the span, and keep it short so both lines still show.
Is the label a heading?
No. It is a span, so it stays out of the heading outline. Use a heading element when those words should be a section title.
Related
- With Text Left SeparatorA label at the start of a row with a
- 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
- Button with Text (Standard)The one filled action
- Section Divider SeparatorA horizontal separator between two titled