Better Auth UI

Overview

Better Auth UI is a dedicated open-source UI component library designed for the Better Auth ecosystem. It provides fully accessible, production-ready authentication flows including email/password authentication, social OAuth logins, magic links, Two-Factor Authentication (2FA), WebAuthn passkeys, and multi-session security dashboards.

Key Features

• 🔐 Comprehensive Auth Workflows: Out-of-the-box support for sign-in, registration, password recovery, email verification, and profile management.
• 🛡️ Modern Security Standards: Pre-configured dialogs and form steps for TOTP Two-Factor Authentication, SMS codes, and WebAuthn Passkeys.
• 🎨 shadcn Design Harmony: Styled with Tailwind CSS variables and Radix UI primitives, ensuring seamless integration with existing shadcn/ui applications.
• ♿ Accessible & Robust Forms: Built-in client-side validation, error handling states, accessible form labels, and loading animations.

Installation & Quick Start

npx shadcn@latest add https://better-auth-ui.com/r/auth-card
# or install via package manager
npm install @better-auth/ui

import React from 'react';
import { AuthCard } from '@/components/auth/auth-card';
import { authClient } from '@/lib/auth-client';

export default function LoginPage() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-muted/40 p-4">
      <AuthCard
        client={authClient}
        providers={['github', 'google']}
        onSuccess={() => window.location.href = '/dashboard'}
      />
    </div>
  );
}

Why Choose Better Auth UI?

• Perfect for: Next.js, Remix, Astro, and Vite full-stack applications requiring robust authentication without building tedious form validation from scratch.
• Comparison: Provides deeper native integration and aesthetic polish for Better Auth than generic headless form libraries.