Shadcn.io is not affiliated with official shadcn/ui
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
Section headers need visual weight without dominating—plain text feels weak, full separators feel heavy. This React Separator pattern places text on the left (Continue with) with a flex-1 separator line extending right, creating directional flow that guides the eye. Built with shadcn/ui and Radix UI, the text uses shrink-0 to maintain size and pr-2 for spacing. Perfect for section headers, continuation prompts, list category labels, or any interface where text introduces content that follows.
With Text Left preview
Installation
Related Components
Separator with Text Center
Centered text between symmetric separators
Separator with Text Right
Right-aligned text with left separator
Basic Separator
Simple horizontal separator
Default Spacing Separator
Separator with standard spacing
Heading
Standard heading component
Card
Card container component
FAQ
Was this page helpful?
Sign in to leave feedback.
With Text Center
Separator with centered text label between two symmetric separator lines for OR dividers in authentication forms built with 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