Shadcn.io is not affiliated with official shadcn/ui
With Text Right
Separator with right-aligned text label preceded by extending separator line for trailing actions and continuation links built with shadcn/ui
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.
With Text Right preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
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
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