{"id":16776,"library":"better-auth-ui","title":"Better Auth UI: Plug & Play Shadcn/UI Components","description":"better-auth-ui is a comprehensive React component library providing plug-and-play authentication UIs built on `shadcn/ui` for the `better-auth` ecosystem. Currently at version 3.2.27, it delivers a suite of pre-built, highly customizable components covering common authentication flows such as sign-in, sign-up, password recovery, user profile management, and settings. The library aims to streamline the development of secure and aesthetically pleasing authentication interfaces by leveraging `shadcn/ui` for styling, `react-hook-form` for form management, and `@tanstack/react-query` for data fetching. It ships with full TypeScript support, ensuring type safety and a robust developer experience. While a specific release cadence isn't detailed, the consistent versioning indicates active development, focusing on integration with `better-auth` to empower developers to 'Own Your Auth' with minimal setup.","status":"active","version":"3.2.27","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript","react","better-auth","shadcn","nextjs"],"install":[{"cmd":"npm install better-auth-ui","lang":"bash","label":"npm"},{"cmd":"yarn add better-auth-ui","lang":"bash","label":"yarn"},{"cmd":"pnpm add better-auth-ui","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core authentication logic and API integration backend. This UI library is designed to work exclusively with it.","package":"better-auth","optional":false},{"reason":"Fundamental UI library for building components.","package":"react","optional":false},{"reason":"Manages server state and data fetching for authentication operations.","package":"@tanstack/react-query","optional":false},{"reason":"Powers form handling and validation within all auth components.","package":"react-hook-form","optional":false},{"reason":"Required for styling the `shadcn/ui` components that better-auth-ui is built upon. Proper configuration is essential.","package":"tailwindcss","optional":false}],"imports":[{"note":"The primary context provider required to wrap your application for all components to function. ESM is the standard import method.","wrong":"const { AuthUIProvider } = require('better-auth-ui');","symbol":"AuthUIProvider","correct":"import { AuthUIProvider } from 'better-auth-ui';"},{"note":"A named export providing the complete sign-in UI component. Ensure named import for all components.","wrong":"import SignInCard from 'better-auth-ui';","symbol":"SignInCard","correct":"import { SignInCard } from 'better-auth-ui';"},{"note":"Similar to SignInCard, this is a named export for the sign-up UI component.","symbol":"SignUpCard","correct":"import { SignUpCard } from 'better-auth-ui';"},{"note":"Provides a user dropdown/profile button, also a named export.","symbol":"UserButton","correct":"import { UserButton } from 'better-auth-ui';"}],"quickstart":{"code":"import { AuthUIProvider, SignInCard } from \"better-auth-ui\";\nimport React from 'react';\n\n// In your main layout file, e.g., src/app/layout.tsx (for Next.js App Router)\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n return (\n \n \n \n {children}\n \n \n \n );\n}\n\n// In a page component, e.g., src/app/login/page.tsx\nexport function LoginPage() {\n return (\n \n \n
\n );\n}","lang":"typescript","description":"Demonstrates wrapping an application with AuthUIProvider and rendering the SignInCard component, typically in a dedicated login page."},"warnings":[{"fix":"Always check the release notes for `better-auth-ui` and its core peer dependencies before major version upgrades. Ensure all peer dependencies are compatible versions.","message":"Upgrading `better-auth` or `@tanstack/react-query` to a new major version might introduce breaking changes that require corresponding updates to `better-auth-ui` or its configuration.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Follow the `shadcn/ui` installation guide to properly configure `tailwind.config.js` with correct content paths, prefixes, and design tokens for your project.","message":"Incorrect or incomplete Tailwind CSS configuration will lead to unstyled or improperly styled components, as `better-auth-ui` relies heavily on `shadcn/ui`'s utility-first styling approach.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure `AuthUIProvider` is placed high enough in your component tree, typically in your root layout or entry file, to provide context to all `better-auth-ui` components.","message":"Failure to wrap your application with the `AuthUIProvider` will result in components not functioning correctly or throwing errors related to missing context.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Carefully review the `peerDependencies` listed in `package.json` and ensure all required packages are installed at compatible versions in your project.","message":"Missing or incompatible peer dependencies (e.g., `react-hook-form`, `zod`, various `@radix-ui` packages) can cause runtime errors or build failures.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consult the official documentation (better-auth-ui.com) and migration guides (if available) for specific changes when upgrading from `better-auth-ui` v2.x to v3.x.","message":"Version 3 significantly refactored component APIs and internal structures to better align with `better-auth` v1.5.2+ and modern React practices. Direct imports or props from v2 might no longer be valid.","severity":"breaking","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Ensure form components are correctly rendered within a `