better-auth-ui-svelte provides pre-built, customizable authentication UI components designed specifically for integration with the Better Auth backend in Svelte 5 applications. Currently at version 0.12.4, this library is in active early stage development, cautioning users that it is not yet battle-tested in production environments and issues may arise before a v1.0 stable release. The package aims for a rapid iteration cycle, with minor and patch releases occurring frequently as seen in its recent history (multiple patch and minor releases within months). A key differentiator is its full feature parity with the original Better Auth UI React library, leveraging Svelte 5 runes and modern practices, while also introducing Svelte-specific utilities like path helpers. It is styled with Tailwind CSS v4 and built upon shadcn-svelte components, offering extensive customization options out-of-the-box. The library supports Zod 4 for form validation and is localization-ready, but users should be aware that this Svelte port may diverge from the React version's API and features over time.
npm install better-auth-ui-svelteVerified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates setting up the Better Auth client, integrating Tailwind CSS, and using fundamental UI components like `AuthLayout`, `UserButton`, and `ChangeEmailCard` in a SvelteKit project.
Thoroughly test components in your specific application context and be prepared to address potential bugs or API changes. Monitor the GitHub repository for updates and contribute feedback.
For TailwindCSS v4, add `@import 'better-auth-ui-svelte/css';` to your global CSS file (e.g., `app.css`). Remove the `content: ['./node_modules/better-auth-ui-svelte/dist/**/*.{js,svelte}']` entry from your `tailwind.config.js` if upgrading.Consult the Svelte port's specific documentation and changelog, rather than relying solely on the React version's documentation, to stay informed about potential differences.
Ensure that `form.setFieldValue()` calls or similar state updates within `$effect` blocks are wrapped in `untrack()` to prevent re-triggering the effect unnecessarily. Verify that hooks are not called inside `$derived` computations, which can cause unexpected behavior.
If you had custom logic for extending the `UserButton`'s dropdown, refactor to use the new `menuItems` snippet prop. For example: `<UserButton>{#snippet menuItems()}...your custom items...{/snippet}</UserButton>`.Ensure your `better-auth-ui-svelte` package is correctly installed and that the `@import 'better-auth-ui-svelte/css';` statement is in a CSS file processed by TailwindCSS.
Check for components that render differently based on client-side state or environment variables. Ensure consistent configuration between SSR and CSR, and consider using `onMount` for client-only rendering logic for non-critical elements.
Move any side-effecting or hook-based logic out of `$derived` computations. `$derived` should only compute a value based on other reactive states, not perform actions. Use `$effect` for side effects.
Wrap state-setting calls within `$effect` blocks (e.g., `form.setFieldValue()`) in `untrack(() => { ... })` to prevent the update from re-triggering the effect itself. Carefully manage dependencies and side effects in Svelte 5 runes.