Quick Start
Getting Started with Better Auth UI for shadcn/ui
Prerequisites
Before you start, make sure you have the following prerequisites integrated into your project:
Installation
Install the auth components
Install the authentication page components using shadcn CLI.
npx shadcn@latest registry add @better-auth-ui=https://better-auth-ui.com/r/{style}/{name}.jsonnpx shadcn@latest add @better-auth-ui/authThis installs the <Auth /> component and its built-in views: authenticated redirect, sign-in, sign-up, sign-out, forgot-password, reset-password, reset-link-sent, and verify-email.
Install settings and user button (optional)
If you need the settings page and user button, install them separately.
npx shadcn@latest registry add @better-auth-ui=https://better-auth-ui.com/r/{style}/{name}.jsonnpx shadcn@latest add @better-auth-ui/settings @better-auth-ui/user-buttonInstall everything (optional)
Alternatively, install every component, plugin, and email template in one shot.
npx shadcn@latest registry add @better-auth-ui=https://better-auth-ui.com/r/{style}/{name}.jsonnpx shadcn@latest add @better-auth-ui/allNext Steps
Follow a framework-specific guide to integrate Better Auth UI into your project.
TanStack Start
Integrate Better Auth UI with TanStack Start
Next.js
Integrate Better Auth UI with Next.js
React Reference
Every shadcn/ui component is built on the shared @better-auth-ui/react data layer. Dive into the hooks and query primitives when you need to read, mutate, or extend auth state directly.
Last updated on