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 add https://better-auth-ui.com/r/auth.jsonThis installs the <Auth /> component and its views: sign-in, sign-up, forgot-password, reset-password, and sign-out.
Install settings and user button (optional)
If you need the settings page and user button, install them separately.
npx shadcn@latest add https://better-auth-ui.com/r/settings.json https://better-auth-ui.com/r/user-button.jsonInstall everything (optional)
Alternatively, install every component, plugin, and email template in one shot.
npx shadcn@latest add https://better-auth-ui.com/r/all.jsonNext 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