{"id":17175,"library":"better-auth-ui-svelte","title":"Better Auth UI for Svelte 5","description":"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.","status":"active","version":"0.12.4","language":"javascript","source_language":"en","source_url":"https://github.com/multiplehats/better-auth-ui-svelte","tags":["javascript","svelte","svelte5","better-auth","authentication","auth","ui-components","forms","signin","typescript"],"install":[{"cmd":"npm install better-auth-ui-svelte","lang":"bash","label":"npm"},{"cmd":"yarn add better-auth-ui-svelte","lang":"bash","label":"yarn"},{"cmd":"pnpm add better-auth-ui-svelte","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core Svelte framework, specifically Svelte 5.","package":"svelte","optional":false},{"reason":"Used for SvelteKit integration and server/client-side path utilities.","package":"@sveltejs/kit","optional":true},{"reason":"The core authentication client library that these UI components integrate with.","package":"better-auth","optional":false},{"reason":"Used for passkey authentication features.","package":"@better-auth/passkey","optional":true},{"reason":"Underlying headless UI component library for accessibility and composability.","package":"bits-ui","optional":false},{"reason":"Icon library used within the components.","package":"@lucide/svelte","optional":false},{"reason":"Styling framework used for all components (v4 recommended).","package":"tailwindcss","optional":false},{"reason":"Schema validation library for forms.","package":"zod","optional":false},{"reason":"Cryptographic hashing library, likely for internal authentication processes.","package":"@noble/hashes","optional":true},{"reason":"Data visualization utility, potentially for dashboards or analytics components.","package":"d3-scale","optional":true},{"reason":"Data visualization utility, potentially for dashboards or analytics components.","package":"d3-shape","optional":true},{"reason":"Charting library, likely for analytics or user activity displays.","package":"layerchart","optional":true}],"imports":[{"note":"The library primarily uses named exports. Direct CommonJS `require` for specific components is generally not recommended in modern SvelteKit projects which favor ESM.","wrong":"const AuthLayout = require('better-auth-ui-svelte').AuthLayout;","symbol":"AuthLayout","correct":"import { AuthLayout } from 'better-auth-ui-svelte';"},{"note":"Components are re-exported from the main entry point; importing directly from '.svelte' files is not the intended public API.","wrong":"import UserButton from 'better-auth-ui-svelte/UserButton.svelte';","symbol":"UserButton","correct":"import { UserButton } from 'better-auth-ui-svelte';"},{"note":"Localization objects are named exports from the root, not separate subpaths, since v0.8.0.","wrong":"import { nlLocalization } from 'better-auth-ui-svelte/localization';","symbol":"nlLocalization","correct":"import { nlLocalization } from 'better-auth-ui-svelte';"}],"quickstart":{"code":"import { SvelteKitAuth } from 'better-auth/client';\nimport { AuthLayout, UserButton, ChangeEmailCard } from 'better-auth-ui-svelte';\n\n// In src/lib/auth.ts (or similar)\nexport const auth = new SvelteKitAuth({\n  apiEndpoint: '/api/auth'\n});\n\n// In src/routes/+layout.svelte\n<script lang=\"ts\">\n  import { onMount } from 'svelte';\n  import '../app.css'; // Your global CSS with Tailwind imports\n  import { auth } from '$lib/auth';\n\n  onMount(() => {\n    // Initialize auth client if needed, or ensure stores are reactive\n  });\n</script>\n\n<AuthLayout>\n  <UserButton />\n</AuthLayout>\n\n<!-- In src/routes/settings/email/+page.svelte -->\n<script lang=\"ts\">\n  import { auth } from '$lib/auth';\n</script>\n\n<ChangeEmailCard auth={auth} />","lang":"typescript","description":"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."},"warnings":[{"fix":"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.","message":"This library is in early stage development and has not been battle-tested in production environments. Issues may arise before v1.0 stable. Use at your own risk.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"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.","message":"For TailwindCSS v4, the CSS import mechanism changed from content configuration to a direct `@import` statement in your global CSS. Older content configuration for v3 is deprecated.","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"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.","message":"The Svelte port may evolve independently and diverge from the original React library's API and features over time, prioritizing the needs of the Svelte ecosystem and maintainer's projects.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"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.","message":"Changes in Svelte 5's reactivity model, specifically the use of `$derived` and `$effect` runes, can lead to infinite reactive loops or delayed data loading if not handled carefully, particularly with form fields or data fetching.","severity":"gotcha","affected_versions":">=0.7.0"},{"fix":"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>`.","message":"The `UserButton` component's structure was enhanced with a `menuItems` snippet prop, allowing callers to inject custom `DropdownMenu` items.","severity":"breaking","affected_versions":">=0.9.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"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.","cause":"Incorrect path or missing CSS file for TailwindCSS v4 import.","error":"Failed to resolve import \"better-auth-ui-svelte/css\" from \"<your-css-file>\""},{"fix":"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.","cause":"Client-side rendering output does not match server-side rendering output, often due to dynamic content or environmental differences during SSR.","error":"Error: Hydration completed but contains mismatches."},{"fix":"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.","cause":"Svelte 5 runes are misused, specifically calling reactive hooks (like those for data fetching or effects) within a `$derived` block.","error":"Error: hooks called inside $derived"},{"fix":"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.","cause":"A state update within an `$effect` or form handler is causing the effect or form to re-evaluate and update the state again, leading to an endless cycle.","error":"Infinite reactive loop detected in Svelte 5 form or effect."}],"ecosystem":"npm","meta_description":null}