Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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
Questions you might have
React Separator - Double Line
Two parallel horizontal separators with space-y-1 gap for elegant, formal, or traditional visual divisions with sophisticated appearance
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