Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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
Questions you might have
React Separator - With Text Center
Separator with centered text label between two symmetric separator lines for OR dividers in authentication forms built with shadcn/ui
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