Better Auth UI

Authentication components and data utilities for Better Auth, available for React and Solid.

Documentation · Demo · Discord

Better Auth UI provides complete authentication flows, account settings, plugin integrations, and reusable data APIs. Choose the UI that fits your application:

• shadcn/ui provides React components that you copy into your project.
• HeroUI provides packaged React components built with HeroUI v3.
• Zaidan Solid provides Solid components that you copy into your project.
• React and Solid packages provide hooks, queries, mutations, and server helpers for custom interfaces.

Features

• Sign-in, sign-up, email verification, and password recovery flows
• User profiles, account settings, session management, and security controls
• Integrations for Better Auth plugins such as organizations, passkeys, two-factor authentication, magic links, and API keys
• Query and mutation APIs for React and Solid
• Server-rendering helpers and customizable email templates
• Light and dark themes with full control over copied component code

Preview

shadcn/ui

HeroUI

Quick start

Install Better Auth. Then configure it for your application before you add a UI package.

shadcn/ui

Add the authentication components to an existing shadcn/ui project:

bunx --bun shadcn@latest add @better-auth-ui/auth

Read the shadcn/ui quick start for framework setup and optional components.

HeroUI

Install the HeroUI package and its Better Auth UI dependencies:

bun add @better-auth-ui/heroui@latest @better-auth-ui/react@latest @better-auth-ui/core@latest

Import the component styles in your global CSS file:

@import "@better-auth-ui/heroui/styles";

Read the HeroUI quick start for provider and framework setup.

Zaidan Solid

Install the Solid data layer and its runtime dependencies:

bun add @better-auth-ui/solid @tanstack/solid-query better-auth solid-js

Then add the authentication components from the Solid registry:

bunx --bun shadcn@latest add https://better-auth-ui.com/r/solid/auth.json

Read the Zaidan Solid quick start for TanStack Start setup and optional components.

Package reference

| Package | Purpose | | --- | --- | | @better-auth-ui/core | Shared query options, server helpers, types, and framework-independent utilities | | @better-auth-ui/react | React providers, hooks, queries, mutations, and plugin APIs | | @better-auth-ui/heroui | Ready-to-use React components built with HeroUI | | @better-auth-ui/solid | Solid providers, hooks, queries, mutations, and plugin APIs | | @better-auth-ui/locales | Locale bundles, language matching helpers, and the localization skill |

See the React reference or Solid reference when you need lower-level APIs.

Agent skills

Better Auth UI publishes the same agent skills through TanStack Intent and skills.sh.

For GitHub installation, select the skill for your application:

bunx skills@latest add better-auth-ui/better-auth-ui --full-depth --skill better-auth-ui-react

Skills cover React/shadcn, Solid/Zaidan, HeroUI, core data APIs, and localization. TanStack Intent loads them from installed npm packages.

Read the agent skills guide for both installation paths and their version behavior.

Development

This repository uses Bun and Nx.

Install the workspace dependencies:

bun install

Start the development projects:

bun run dev

Run the main workspace tasks:

bun run build
bun run test

Community

Join the Better Auth UI Discord to ask questions, share feedback, and connect with contributors.

License

Better Auth UI is available under the MIT License.