Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Separator - With Text Right
Separator with right-aligned text label preceded by extending separator line for trailing actions and continuation links built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes the label belongs at the end—not the beginning. This React Separator pattern places a flex-1 separator line on the left with text aligned right (More), creating visual flow toward a concluding action or link. Built with shadcn/ui and Radix UI, the text uses shrink-0 to prevent compression and pl-2 for spacing. Perfect for More links, View all actions, expandable content triggers, or any interface where text represents the conclusion or continuation point of a section.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Separator with Text Center
Centered text between symmetric separators
Separator with Text Left
Left-aligned text with right separator
Basic Separator
Simple horizontal separator
Default Spacing Separator
Separator with standard spacing
Link Button
Button styled as link
Collapsible
Expandable content section
Questions you might have
React Separator - With Text Left
Separator with left-aligned text label followed by extending separator line for section headers and directional content flow built with shadcn/ui
React Product Details Sheet
Sheet component displaying product details with image, pricing, stock badge, feature list, and add to cart action for e-commerce interfaces built with shadcn/ui