Password Strength
Good
Password Match
Passwords match
Phone Formatting
(555) 123-4567
Auto-formatted
OAuth Providers
Google
GitHub
Error Handling
Email is required
Password too short
Accessibility
aria-invalid
aria-describedby
role="alert"
Forgot Password
john@example.com
Reset password
Confetti Confirm
Welcome aboard!
Terms & Privacy
Terms of Service
Privacy Policy
Mobile-first
Password Strength
Good
Password Match
Passwords match
Phone Formatting
(555) 123-4567
Auto-formatted
OAuth Providers
Google
GitHub
Error Handling
Email is required
Password too short
Accessibility
aria-invalid
aria-describedby
role="alert"
Forgot Password
john@example.com
Reset password
Confetti Confirm
Welcome aboard!
Terms & Privacy
Terms of Service
Privacy Policy
Mobile-first

Auth UI Kit

Production auth screens, ready to ship.

Sign up, login, forgot password, and confirmation flows. Accessible, validated, responsive. Built with Next.js, shadcn/ui, and Tailwind.

What's built in

Not a wireframe. Not a template with TODO comments. Every state is handled.

Accessible by default

aria-describedby, aria-invalid, error summaries with field links, role="alert" and aria-live="polite" for live announcements.

Real validation

Password strength meter, real-time confirm match, phone auto-formatting, field-level and form-level errors.

OAuth ready

Google and GitHub buttons styled with provider icons. Divider pattern. Drop in your provider SDK to connect.

Mobile-first

Responsive from 320px up. Split layout on desktop, stacked on mobile. 48px input and button targets.

Trust signals

Testimonial, stats, feature badges, terms/privacy links, encryption callouts on confirmation.

Next.js + shadcn/ui

App Router, Tailwind v4, shadcn components. No runtime dependencies beyond React.