Make your AI a shadcn expert
Previous: Thick Separator
Next: With Text Left

With Text Center

Centered text between two flex-1 React separators for OR dividers in authentication forms built with shadcn/ui

Split two equal choices with a labeled rule. This React pattern places OR between two flex-1 Separators so the lines stay symmetric as the form width changes. Built with shadcn/ui and Radix UI. Perfect for social-login dividers, payment-method choices, and any pair of equivalent options.

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

Horizontal Separator

Simple horizontal separator

Default Spacing Separator

Separator with standard spacing

Button

Standard button component

Section Divider

Titled section breaks

FAQ

Was this page helpful?

Sign in to leave feedback.

Thick Separator

A thick horizontal React separator that overrides the primitive h-px rule with data-orientation height for a 4px break

With Text Left

Left-aligned text followed by a flex-1 React separator for section labels that introduce the content below

Get Pro — Save 33%·--:--:--→