Stop Rebuilding UI
Previous: Thick Separator
Next: With Text Left

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

Scroll to load preview

Installation

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.

Thick Separator

A thick horizontal separator using h-1 (4px) height for prominent visual division between content sections

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