Installation

Recommended: Manual Installation (Registry)

This is the Pro-Level approach. It installs the UI components directly into your project, giving you full control over the code while ensuring a high-performance, tailored experience. All internal logic (hooks, types, and utilities) is imported directly from the better-auth-ui package.

1. Install the Core Package

Before adding components, you must install the core package which provides all the shared logic, hooks, and types used by the UI components.

npm install better-auth-ui@latest

pnpm add better-auth-ui@latest

yarn add better-auth-ui@latest

bun add better-auth-ui@latest

2. Install Auth Components

Includes sign-in, sign-up, forgot password, and other core authentication forms.

pnpm dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/auth.json

npx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/auth.json

yarn dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/auth.json

bun x shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/auth.json

3. Install Organization Management (Optional)

Required if you want to use team management and invitation flows.

pnpm dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/org.json

npx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/org.json

yarn dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/org.json

bun x shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/org.json

4. Install Account Settings (Optional)

Includes user profile, security settings, and account management cards.

pnpm dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/account.json

npx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/account.json

yarn dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/account.json

bun x shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/account.json

[!TIP] Manual installation allows you to easily customize the UI to match your brand perfectly, as the component code lives directly in your components/ folder, while the complex logic remains handled by the better-auth-ui library.

Alternative: Quick Start (npm Package)

If you prefer a managed approach or want to get started instantly without managing the source code, you can install the library as a package.

npm install better-auth-ui@latest

pnpm add better-auth-ui@latest

yarn add better-auth-ui@latest

bun add better-auth-ui@latest

TailwindCSS Configuration

For TailwindCSS v4, add the following @import to your global css:

@import "better-auth-ui/css";

For TailwindCSS v3 (Deprecated), add the following content to your Tailwind config:

content: ["./node_modules/better-auth-ui/dist/**/*.{js,ts,jsx,tsx,mdx}"];

Integrations

Once you've installed the components, follow one of the guides below to integrate with your framework.