shadcn.io is not affiliated with official shadcn/ui
Separator examples · With Text
With Text Right Separator for React
A separator running to a More link at the end of the row, for a section that continues elsewhere.
End the row with the action. A Separator with flex-1 fills the row up to a More link at the end, so the line points at what comes next. Use it for View all, Show more and section footers.
Preview
Installation
FAQ
How does More end up at the end?
The Separator with flex-1 comes first, then an a with shrink-0. The row is flex items-center gap-2, so the line fills the start and the link sits at the end.
Is More a real link?
Yes. It is an a with href="#more". Use a real URL there. Hover uses hover:text-foreground and hover:underline on the anchor.
Why does the line use flex-1?
Separator includes shrink-0. flex-1 is merged after that class, and cn() keeps flex-1, which sets shrink too. The link's shrink-0 keeps More at its own width.
How is the link styled at rest?
The anchor uses text-xs and text-muted-foreground. shrink-0 keeps the word from shrinking when the row gets narrow.
Related
- With Text Center SeparatorCentered text between two separators, the
- With Text Left SeparatorA label at the start of a row with a
- Horizontal SeparatorA horizontal separator that divides a
- Default Spacing SeparatorA horizontal separator in a flex column
- Button with Text (Link)Underline on hover, no fill
- Simple CollapsibleA ghost Toggle button with a chevron that