Shadcn.io is not affiliated with official shadcn/ui
With Text Center
Separator with centered text label between two symmetric separator lines for OR dividers in authentication forms built with shadcn/ui
Authentication forms need that classic Or continue with divider—plain separators don't communicate the choice. This React Separator pattern places centered text (OR) between two flex-1 separator lines creating perfect symmetry. Built with shadcn/ui and Radix UI, the text uses shrink-0 to prevent compression, px-2 for breathing room, and uppercase styling for emphasis. Perfect for social login dividers, payment method choices, form alternatives, or any interface presenting equivalent options requiring visual balance.
With Text Center preview
Installation
Related Components
Separator with Text Left
Left-aligned text with right separator
Separator with Text Right
Right-aligned text with left separator
Basic Separator
Simple horizontal separator
Default Spacing Separator
Separator with standard spacing
Button
Standard button component
Form
Form layout patterns
FAQ
Was this page helpful?
Sign in to leave feedback.
Double Line
Two parallel horizontal separators with space-y-1 gap for elegant, formal, or traditional visual divisions with sophisticated appearance
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