### Bash: Start Development Server

Source: https://github.com/multiplehats/better-auth-ui-svelte/blob/main/README.md

This bash command starts the Svelte development server. It typically includes hot module replacement and other features for a smooth development experience. Ensure all dependencies are installed and environment variables are configured.

```bash
pnpm dev
```

--------------------------------

### Bash: Install Dependencies

Source: https://github.com/multiplehats/better-auth-ui-svelte/blob/main/README.md

This bash command installs project dependencies using pnpm, a fast, reliable, and efficient package manager for Node.js. Ensure Node.js 18+ and pnpm are installed before running.

```bash
pnpm install
```

--------------------------------

### Install Better Auth UI Svelte Package

Source: https://github.com/multiplehats/better-auth-ui-svelte/blob/main/README.md

Installs the better-auth-ui-svelte package using various package managers. Ensure Better Auth and shadcn are set up in your project first.

```bash
pnpm add better-auth-ui-svelte

## bun add better-auth-ui-svelte
## npm install better-auth-ui-svelte
## yarn add better-auth-ui-svelte
```

--------------------------------

### Create Better Auth Client Instance

Source: https://context7.com/multiplehats/better-auth-ui-svelte/llms.txt

Illustrates the setup of the Better Auth client instance in TypeScript. This client is essential for all authentication operations and can be configured with various plugins like organization, two-factor authentication, and passkey support.

```typescript
// src/lib/auth-client.ts
import { createAuthClient } from 'better-auth/svelte';
import { organizationClient } from 'better-auth/client/plugins';
import { twoFactorClient } from 'better-auth/client/plugins';
import { passkeyClient } from '@better-auth/passkey/client';

export const authClient = createAuthClient({
	baseURL: 'http://localhost:5173',
	plugins: [
	organizationClient(),
		twoFactorClient(),
		passkeyClient()
	]
});
```

--------------------------------

### Install and Configure Better Auth UI Svelte

Source: https://context7.com/multiplehats/better-auth-ui-svelte/llms.txt

Instructions for installing the better-auth-ui-svelte package and configuring TailwindCSS to include the library's styles. This ensures the UI components are correctly styled within your Svelte application.

```bash
# Install the package
pnpm add better-auth-ui-svelte

# Peer dependencies required
# svelte ^5.0.0, better-auth ^1.3.0, bits-ui ^2.0.0, @lucide/svelte ^0.400.0
# tailwindcss ^4.0.0, zod ^4.0.0, svelte-sonner ^0.4.0
```

```css
/* app.css - Add TailwindCSS v4 import */
@import 'better-auth-ui-svelte/css';
```

--------------------------------

### Bash: Configure Environment Variables

Source: https://github.com/multiplehats/better-auth-ui-svelte/blob/main/README.md

This bash command copies the example environment variables file to a new file named `.env`. You should then update the values in the `.env` file to match your development environment configuration.

```bash
cp .env.example .env
```

--------------------------------

### Server-Side Redirects with Path Helpers (TypeScript)

Source: https://github.com/multiplehats/better-auth-ui-svelte/blob/main/README.md

Illustrates how to use path helper functions within SvelteKit's server hooks (`hooks.server.ts`) to implement authentication redirects. This example shows redirecting unauthenticated users to the sign-in page and authenticated users away from the sign-in page.

```typescript
// src/hooks.server.ts
import { redirect } from '@sveltejs/kit';
import { getAuthPath } from 'better-auth-ui-svelte';

export async function handle({ event, resolve }) {
	const session = await getSession(event);

	// Redirect unauthenticated users to sign-in
	if (!session && event.url.pathname.startsWith('/app')) {
		throw redirect(303, getAuthPath('SIGN_IN'));
	}

	// Redirect authenticated users away from auth pages
	if (session && event.url.pathname === getAuthPath('SIGN_IN')) {
		throw redirect(303, '/app');
	}

	return resolve(event);
}

```

--------------------------------

### Bash: Start Mailpit for Email Testing

Source: https://github.com/multiplehats/better-auth-ui-svelte/blob/main/README.md

This bash command starts Mailpit in detached mode using Docker Compose. Mailpit provides a local SMTP server and web UI for testing authentication emails like magic links and OTP codes. Access the UI at http://localhost:8025.

```bash
docker compose up -d
```

--------------------------------

### Bash: Stop Mailpit

Source: https://github.com/multiplehats/better-auth-ui-svelte/blob/main/README.md

This bash command stops the Mailpit services that were started using Docker Compose. It ensures that Mailpit and any associated containers are properly shut down.

```bash
docker compose down
```

--------------------------------

### Set Up AuthUIProvider in Root Layout (Svelte)

Source: https://github.com/multiplehats/better-auth-ui-svelte/blob/main/README.md

Wraps the application with authentication context. Requires importing AuthUIProvider, Toaster, authClient, and navigation functions. The AuthUIProvider takes the authClient as a prop and renders child components.

```svelte
<!-- src/routes/+layout.svelte -->
<script lang="ts">
	import { AuthUIProvider } from 'better-auth-ui-svelte';
	import { Toaster } from 'svelte-sonner';
	import { authClient } from '$lib/auth-client';
	import { goto, invalidateAll } from '$app/navigation';
</script>

<Toaster />

<AuthUIProvider {authClient}>
	{@render children()}
</AuthUIProvider>
```

--------------------------------

### Set Up Better Auth Client in SvelteKit

Source: https://github.com/multiplehats/better-auth-ui-svelte/blob/main/README.md

Creates a Better Auth client instance in your SvelteKit project, typically in `src/lib/auth-client.ts`. Configure the `baseURL` and include any necessary plugins like `organizationClient` or `twoFactorClient`.

```typescript
import { createAuthClient } from 'better-auth/svelte';

export const authClient = createAuthClient({
	baseURL: 'http://localhost:5173',
	// Add any plugins you need
	plugins: [
		// organizationClient(),
		// twoFactorClient(),
		// etc.
	]
});
```

--------------------------------

### Context Helpers in TypeScript

Source: https://context7.com/multiplehats/better-auth-ui-svelte/llms.txt

Illustrates how to access authentication context and configuration within any component nested under the AuthUIProvider. It shows how to retrieve the auth client, UI configuration, and localization strings.

```typescript
import {
	getAuthUIConfig,
	getAuthClient,
	getLocalization
} from 'better-auth-ui-svelte';

// Get full configuration
const config = getAuthUIConfig();
const { authClient, basePath, social, hooks, mutators } = config;

// Get auth client directly
const authClient = getAuthClient();
const session = authClient.useSession();

// Get localization strings
const localization = getLocalization();
console.log(localization.SIGN_IN); // 'Sign In'
```

--------------------------------

### Set Up AuthUIProvider in Svelte Layout

Source: https://context7.com/multiplehats/better-auth-ui-svelte/llms.txt

Demonstrates how to wrap your Svelte application with the AuthUIProvider in your root layout file. This component provides authentication context and configuration, enabling features like social logins, magic links, passkeys, and more.

```svelte
<!-- src/routes/+layout.svelte -->
<script lang="ts">
	import { AuthUIProvider } from 'better-auth-ui-svelte';
	import { Toaster } from 'svelte-sonner';
	import { authClient } from '$lib/auth-client';
	import { goto, invalidateAll } from '$app/navigation';

	let { children } = $props();
</script>

<Toaster />

<AuthUIProvider
	{authClient}
	navigate={goto}
	onSessionChange={async () => await invalidateAll()}
	social={{
		providers: ['github', 'google', 'facebook']
	}}
	magicLink
	passkey
	multiSession
	twoFactor={['otp', 'totp']}
	credentials={{
		forgotPassword: true,
		rememberMe: true
	}}
	signUp={{
		fields: ['name']
	}}
	account={{
		fields: ['image', 'name']
	}}
	organization
	basePath="/auth"
	redirectTo="/dashboard"
>
	{@render children()}
</AuthUIProvider>
```

--------------------------------

### Bash: Build Library

Source: https://github.com/multiplehats/better-auth-ui-svelte/blob/main/README.md

This bash command compiles the Better Auth UI Svelte library into a production-ready format. This is typically used when preparing the library for distribution or deployment.

```bash
pnpm run build
```

--------------------------------

### Shared Authentication Path Configuration (TypeScript)

Source: https://github.com/multiplehats/better-auth-ui-svelte/blob/main/README.md

Demonstrates how to create a shared configuration file for authentication paths in a SvelteKit application using 'better-auth-ui-svelte'. This approach centralizes path definitions, allowing for easy customization of base paths and individual view paths, ensuring consistency across the application.

```typescript
// src/lib/config/auth-config.ts
import type { PathConfig } from 'better-auth-ui-svelte';

export const authPathConfig: PathConfig = {
	basePath: '/auth',
	// Optionally customize individual paths
	viewPaths: {
		SIGN_IN: 'login', // /auth/login instead of /auth/sign-in
		SIGN_UP: 'register' // /auth/register instead of /auth/sign-up
	}
};

```

--------------------------------

### Create Admin Interface Dynamic Routes (Svelte)

Source: https://github.com/multiplehats/better-auth-ui-svelte/blob/main/README.md

Sets up dynamic routes for the admin interface using `AdminView`. This allows for managing users, organizations, and viewing dashboards through distinct paths like `/app/admin/users` and `/app/admin/organizations`. It requires importing `AdminView` and handling route parameters.

```svelte
<!-- src/routes/app/admin/[path]/+page.svelte -->
<script lang="ts">
	import { AdminView } from 'better-auth-ui-svelte';
	import type { PageProps } from './$types.js';

	let { params }: PageProps = $props();
</script>

<AdminView path={params.path} />
```

--------------------------------

### Svelte Path Helpers Usage (TypeScript)

Source: https://github.com/multiplehats/better-auth-ui-svelte/blob/main/README.md

Demonstrates the usage of path helper functions provided by 'better-auth-ui-svelte' for generating authentication, account, organization, and admin paths. These functions are type-safe and ensure consistency across client-side and server-side SvelteKit applications, avoiding hardcoded paths.

```typescript
import { getAuthPath, getAuthUrl, getAccountPath, getOrganizationPath, getAdminPath } from 'better-auth-ui-svelte';

// Get auth paths (default: '/auth')
getAuthPath('SIGN_IN'); // '/auth/sign-in'
getAuthPath('SIGN_UP'); // '/auth/sign-up'
getAuthPath('FORGOT_PASSWORD'); // '/auth/forgot-password'

// Get full URLs (useful for emails, redirects)
getAuthUrl('RESET_PASSWORD', {
	baseURL: 'https://example.com'
}); // 'https://example.com/auth/reset-password'

// Account and organization paths
getAccountPath('SETTINGS'); // '/account/settings'
getOrganizationPath('MEMBERS'); // '/organization/members'

// Admin paths
getAdminPath('DASHBOARD'); // '/admin/dashboard'
getAdminPath('USERS'); // '/admin/users'
getAdminPath('ORGANIZATIONS'); // '/admin/organizations'

```

--------------------------------

### Customize AuthUIProvider with Additional Settings (Svelte)

Source: https://github.com/multiplehats/better-auth-ui-svelte/blob/main/README.md

Demonstrates how to customize the AuthUIProvider with various options such as navigation callbacks, social login providers, and multi-factor authentication settings. It accepts props like `navigate`, `onSessionChange`, `social`, `magicLink`, `passkey`, `multiSession`, and `twoFactor`.

```svelte
<AuthUIProvider
	{authClient}
	navigate={goto}
	onSessionChange={async () => await invalidateAll()}
	social={{
		providers: ['github', 'google', 'facebook']
	}}
	magicLink
	passkey
	multiSession
	twoFactor={['otp', 'totp']}
>
	<slot />
</AuthUIProvider>
```

--------------------------------

### TypeScript Path Helpers for Account, Organization, and Admin

Source: https://context7.com/multiplehats/better-auth-ui-svelte/llms.txt

Provides utility functions for generating URL paths and full URLs for account management, organization settings, and administrative interfaces. These helpers are designed for server-side compatibility.

```typescript
import {
	getAccountPath,
	getAccountUrl,
	getAllAccountPaths,
	getOrganizationPath,
	getOrganizationUrl,
	getAllOrganizationPaths,
	getAdminPath,
	getAdminUrl,
	getAllAdminPaths
} from 'better-auth-ui-svelte';

// Account paths
getAccountPath('SETTINGS');      // '/account/settings'
getAccountPath('SECURITY');      // '/account/security'
getAccountPath('API_KEYS');      // '/account/api-keys'
getAccountPath('ORGANIZATIONS'); // '/account/organizations'

// Organization paths
getOrganizationPath('SETTINGS'); // '/organization/settings'
getOrganizationPath('MEMBERS');  // '/organization/members'
getOrganizationPath('API_KEYS'); // '/organization/api-keys'

// Admin paths
getAdminPath('DASHBOARD');       // '/admin/dashboard'
getAdminPath('USERS');           // '/admin/users'
getAdminPath('ORGANIZATIONS');   // '/admin/organizations'

// Full URLs with baseURL
getAccountUrl('SETTINGS', { baseURL: 'https://example.com' });
// 'https://example.com/account/settings'
```

--------------------------------

### TypeScript Path Helpers for Authentication

Source: https://context7.com/multiplehats/better-auth-ui-svelte/llms.txt

Provides utility functions for generating authentication-related URL paths and full URLs. These helpers are compatible with both client-side and server-side environments, ensuring consistent routing.

```typescript
// src/hooks.server.ts
import { redirect } from '@sveltejs/kit';
import { getAuthPath, getAuthUrl, getAllAuthPaths } from 'better-auth-ui-svelte';

// Get individual paths
getAuthPath('SIGN_IN');                    // '/auth/sign-in'
getAuthPath('SIGN_UP');                    // '/auth/sign-up'
getAuthPath('FORGOT_PASSWORD');            // '/auth/forgot-password'
getAuthPath('RESET_PASSWORD');             // '/auth/reset-password'
getAuthPath('TWO_FACTOR');                 // '/auth/two-factor'

// With custom base path
getAuthPath('SIGN_IN', { basePath: '/authentication' }); // '/authentication/sign-in'

// With custom view paths
getAuthPath('SIGN_IN', {
	viewPaths: { SIGN_IN: 'login' }
}); // '/auth/login'

// Get full URLs for emails/redirects
getAuthUrl('RESET_PASSWORD', {
	baseURL: 'https://example.com'
}); // 'https://example.com/auth/reset-password'

// Get all paths as object
const paths = getAllAuthPaths();
// { SIGN_IN: '/auth/sign-in', SIGN_UP: '/auth/sign-up', ... }

// Server-side redirect example
export async function handle({ event, resolve }) {
	const session = await getSession(event);

	if (!session && event.url.pathname.startsWith('/app')) {
		throw redirect(303, getAuthPath('SIGN_IN'));
	}

	if (session && event.url.pathname === getAuthPath('SIGN_IN')) {
		throw redirect(303, '/app');
	}

	return resolve(event);
}
```

--------------------------------

### Bash: Lint and Format Code

Source: https://github.com/multiplehats/better-auth-ui-svelte/blob/main/README.md

These bash commands are used to maintain code quality and consistency. `pnpm run lint` checks for code style issues and potential errors, while `pnpm run format` automatically formats the code according to predefined style guidelines.

```bash
pnpm run lint
pnpm run format
```

--------------------------------

### AdminDashboard Component Configuration in Svelte

Source: https://context7.com/multiplehats/better-auth-ui-svelte/llms.txt

Allows direct use of the AdminDashboard component with custom configuration for table limits and visibility of 'View All' actions. It accepts props to set the number of items per table and links to dedicated views.

```svelte
<script lang="ts">
	import { AdminDashboard } from 'better-auth-ui-svelte';
</script>

<AdminDashboard
	usersTableLimit={10}
	orgsTableLimit={10}
	showViewAllActions={true}
	usersViewAllHref="/admin/users"
	orgsViewAllHref="/admin/organizations"
/>
```

--------------------------------

### Create Dynamic Auth Pages Route (Svelte)

Source: https://github.com/multiplehats/better-auth-ui-svelte/blob/main/README.md

Sets up a single dynamic route (`/auth/[path]/+page.svelte`) to handle all authentication views. It uses the `AuthView` component and extracts the `path` from the route parameters. This route supports various authentication flows like sign-in, sign-up, password reset, and more.

```svelte
<script lang="ts">
	import { AuthView, authViewPaths } from 'better-auth-ui-svelte';
	import type { PageProps } from './$types.js';

	let { data, params }: PageProps = $props();
</script>

<main class="container flex grow items-center justify-center p-4">
	<AuthView path={params.path} />
</main>
```

--------------------------------

### AuthUIProvider Configuration Props (TypeScript)

Source: https://github.com/multiplehats/better-auth-ui-svelte/blob/main/README.md

Defines the configuration options for the AuthUIProvider component in Better Auth UI Svelte. It accepts an auth client, navigation callbacks, session management hooks, social authentication providers, various authentication methods (magic link, email verification, passkey), two-factor authentication settings, multi-session support, localization, avatar handling, settings page configuration, and organization settings.

```typescript
interface AuthUIProviderProps {
	// Required
	authClient: ReturnType<typeof createAuthClient>;

	// Navigation (SvelteKit)
	navigate?: (href: string) => void;

	// Session management
	onSessionChange?: () => void | Promise<void>;

	// Social authentication
	social?: {
		providers?: ('google' | 'github' | 'facebook' | 'apple' | 'discord' | 'twitter')[];
	};

	// Additional auth methods
	magicLink?: 
		| boolean 
		| {
			resendCooldown?: number;
			redirectToSentPage?: boolean;
		};
	emailVerification?: 
		| boolean 
		| {
			resendCooldown?: number;
			redirectToVerifyPage?: boolean;
		};
	passkey?: boolean;

	// Two-factor authentication
	twoFactor?: ('otp' | 'totp')[];

	// Multi-session support
	multiSession?: boolean;

	// Localization
	localization?: Partial<AuthLocalization>;

	// Avatar handling
	avatar?: {
		upload?: (file: File) => Promise<string>;
		delete?: (url: string) => Promise<void>;
	};

	// Settings page configuration
	settings?: {
		url?: string;
	};

	// Organization configuration
	organization?: {
		pathMode?: 'id' | 'slug';
		basePath?: string;
		slug?: string;
	};
}

```

--------------------------------

### TypeScript Path Helper Functions

Source: https://github.com/multiplehats/better-auth-ui-svelte/blob/main/README.md

These TypeScript functions are used to generate authentication, account, organization, and admin paths. They can optionally accept a configuration object and can return either a relative path or a full URL with a base URL.

```typescript
// Auth paths
getAuthPath(view, config?)
getAuthUrl(view, config?)
getAllAuthPaths(config?)

// Account paths
getAccountPath(view, config?)
getAccountUrl(view, config?)
getAllAccountPaths(config?)

// Organization paths
getOrganizationPath(view, config?)
getOrganizationUrl(view, config?)
getAllOrganizationPaths(config?)

// Admin paths
getAdminPath(view, config?)
getAdminUrl(view, config?)
getAllAdminPaths(config?)
```

--------------------------------

### Using Shared Auth Path Config in Svelte Layout (Svelte)

Source: https://github.com/multiplehats/better-auth-ui-svelte/blob/main/README.md

Shows how to integrate the shared authentication path configuration into a Svelte layout component (`+layout.svelte`) using the `AuthUIProvider`. This ensures that the provider component utilizes the custom base path and view paths defined in the configuration file.

```svelte
<!-- src/routes/+layout.svelte -->
<script lang="ts">
	import { AuthUIProvider } from 'better-auth-ui-svelte';
	import { authClient } from '$lib/auth-client';
	import { authPathConfig } from '$lib/config/auth-config';
</script>

<!-- Provider will use your custom paths -->
<AuthUIProvider
	{authClient}
	basePath={authPathConfig.basePath}
	viewPaths={authPathConfig.viewPaths}
>
	<slot />
</AuthUIProvider>

```

--------------------------------

### Customize Localization with AuthUIProvider in Svelte

Source: https://github.com/multiplehats/better-auth-ui-svelte/blob/main/README.md

Demonstrates how to customize text strings for the Better Auth UI by passing a `localization` prop to the `AuthUIProvider` component. This allows for overriding default labels for actions like sign-in, sign-up, and input fields.

```svelte
<script lang="ts">
	import { AuthUIProvider, authLocalization } from 'better-auth-ui-svelte';
	import { authClient } from '$lib/auth-client';

	const customLocalization = {
		...authLocalization,
		SIGN_IN: 'Log In',
		SIGN_UP: 'Create Account',
		EMAIL: 'Email Address',
		PASSWORD: 'Your Password'
	};
</script>

<AuthUIProvider {authClient} localization={customLocalization}>
	<slot />
</AuthUIProvider>
```

--------------------------------

### Using Shared Auth Path Config in Server Hooks (TypeScript)

Source: https://github.com/multiplehats/better-auth-ui-svelte/blob/main/README.md

Demonstrates how to apply the shared authentication path configuration to server-side redirects within SvelteKit's hooks (`hooks.server.ts`). By passing the `authPathConfig` to `getAuthPath`, server-side logic can consistently use the same path definitions as the client-side.

```typescript
// src/hooks.server.ts
import { redirect } from '@sveltejs/kit';
import { getAuthPath } from 'better-auth-ui-svelte';
import { authPathConfig } from '$lib/config/auth-config';

// Use same config for server-side redirects
throw redirect(303, getAuthPath('SIGN_IN', authPathConfig));

```

--------------------------------

### Redirect Unauthenticated Users with RedirectToSignIn Component

Source: https://context7.com/multiplehats/better-auth-ui-svelte/llms.txt

Shows how to use the `SignedOut` and `RedirectToSignIn` components from `better-auth-ui-svelte` to automatically redirect users to the sign-in page if they are not authenticated. This is typically used on protected pages within a SvelteKit application.

```svelte
<script lang="ts">
	import { SignedOut, RedirectToSignIn } from 'better-auth-ui-svelte';
</script>

<!-- On protected pages -->
<SignedOut>
	<RedirectToSignIn />
</SignedOut>

<SignedIn>
	<!-- Protected content -->
</SignedIn>
```

--------------------------------

### Svelte SignUpForm Component

Source: https://context7.com/multiplehats/better-auth-ui-svelte/llms.txt

Renders a customizable registration form. It accepts props for redirection paths and custom CSS class names to style the form elements.

```svelte
<script lang="ts">
	import { SignUpForm } from 'better-auth-ui-svelte';
</script>

<SignUpForm
	redirectTo="/welcome"
	classNames={{
		base: 'w-full max-w-md',
		input: 'border-input',
		primaryButton: 'w-full'
	}}
/>
```

--------------------------------

### Implement AuthView Component for Dynamic Routing

Source: https://context7.com/multiplehats/better-auth-ui-svelte/llms.txt

Shows how to use the AuthView component in a Svelte page to handle all authentication views dynamically based on the route. This component simplifies the management of various authentication flows, including sign-in, sign-up, password reset, and more.

```svelte
<!-- src/routes/auth/[path]/+page.svelte -->
<script lang="ts">
	import { AuthView } from 'better-auth-ui-svelte';
	import type { PageProps } from './$types.js';

	let { params }: PageProps = $props();
</script>

<main class="container flex grow items-center justify-center p-4">
	<AuthView
		path={params.path}
		redirectTo="/dashboard"
		socialLayout="vertical"
		classNames={{
			base: 'border-2 border-primary',
			header: 'bg-primary/10',
			title: 'text-xl font-bold',
			footerLink: 'text-primary hover:underline'
		}}
	/>
</main>

<!--
Handles these routes automatically:
- /auth/sign-in - Sign in via email/password and social providers
- /auth/sign-up - New account registration
- /auth/magic-link - Email login without a password
- /auth/forgot-password - Request password reset email
- /auth/reset-password - Set new password after receiving reset link
- /auth/two-factor - Two-factor authentication
- /auth/recover-account - Recover account via backup code
- /auth/email-otp - Email OTP verification
- /auth/sign-out - Log the user out
- /auth/callback - OAuth callback handler
- /auth/accept-invitation - Accept organization invitation
-->
```

--------------------------------

### Use Reactive Hooks in Svelte Components

Source: https://context7.com/multiplehats/better-auth-ui-svelte/llms.txt

Demonstrates how to use reactive hooks like `useAuthenticate` and `useCurrentOrganization` from the `better-auth-ui-svelte` library within Svelte components. These hooks manage authentication state and organization data, enabling conditional rendering based on authentication status and organization details.

```svelte
<script lang="ts">
	import { useAuthenticate, useCurrentOrganization } from 'better-auth-ui-svelte';

	// Redirect to sign-in if not authenticated
	useAuthenticate();

	// Get current organization with slug-based routing
	const orgResult = useCurrentOrganization({ slug: 'my-org' });
	const organization = $derived(orgResult.data);
	const isPending = $derived(orgResult.isPending);
</script>

{#if isPending}
	<p>Loading organization...</p>
{:else if organization}
	<h1>{organization.name}</h1>
{/if}
```

--------------------------------

### AccountSettingsCards Component in Svelte

Source: https://context7.com/multiplehats/better-auth-ui-svelte/llms.txt

Provides a complete account settings UI, including sections for avatar, name, username, and connected accounts. It supports custom styling through the 'classNames' prop for different card elements.

```svelte
<script lang="ts">
	import { AccountSettingsCards } from 'better-auth-ui-svelte';
</script>

<div class="container max-w-2xl py-8">
	<h1 class="text-2xl font-bold mb-6">Account Settings</h1>

	<AccountSettingsCards
		classNames={{
			cards: 'space-y-6',
			card: {
				base: 'border rounded-lg p-6',
				title: 'text-lg font-semibold',
				description: 'text-muted-foreground'
			}
		}}
	/>
</div>
```

--------------------------------

### Localization Customization in Svelte

Source: https://context7.com/multiplehats/better-auth-ui-svelte/llms.txt

Demonstrates how to customize all text strings within the Auth UI by providing a custom localization object to the AuthUIProvider. This allows for internationalization and branding.

```svelte
<script lang="ts">
	import { AuthUIProvider, authLocalization } from 'better-auth-ui-svelte';
	import { authClient } from '$lib/auth-client';

	const customLocalization = {
		...authLocalization,
		SIGN_IN: 'Log In',
		SIGN_UP: 'Create Account',
		EMAIL: 'Email Address',
		PASSWORD: 'Your Password',
		FORGOT_PASSWORD: 'Forgot Password?',
		FORGOT_PASSWORD_LINK: 'Reset it here',
		SIGN_IN_ACTION: 'Log In',
		SIGN_UP_ACTION: 'Create Account',
		OR_CONTINUE_WITH: 'Or continue with',
		DONT_HAVE_AN_ACCOUNT: "Don't have an account?",
		ALREADY_HAVE_AN_ACCOUNT: 'Already have an account?'
	};
</script>

<AuthUIProvider {authClient} localization={customLocalization}>
	<slot />
</AuthUIProvider>
```

--------------------------------

### Conditional Rendering with SignedIn and SignedOut (Svelte)

Source: https://github.com/multiplehats/better-auth-ui-svelte/blob/main/README.md

Demonstrates conditional rendering based on user authentication status using `SignedIn` and `SignedOut` components. `SignedOut` renders its children when the user is not logged in, typically for sign-in links. `SignedIn` renders its children when the user is authenticated, often for dashboard links.

```svelte
<script lang="ts">
	import { SignedIn, SignedOut } from 'better-auth-ui-svelte';
</script>

<SignedOut>
	<a href="/auth/sign-in">Sign In</a>
</SignedOut>

<SignedIn>
	<a href="/dashboard">Dashboard</a>
</SignedIn>
```

--------------------------------

### Svelte SignedIn and SignedOut Components for Conditional Rendering

Source: https://context7.com/multiplehats/better-auth-ui-svelte/llms.txt

These components allow for conditional rendering of UI elements based on the user's authentication status. They are useful for showing different navigation or content to signed-in versus signed-out users.

```svelte
<script lang="ts">
	import { SignedIn, SignedOut } from 'better-auth-ui-svelte';
</script>

<nav class="flex items-center gap-4">
	<SignedOut>
		<a href="/auth/sign-in" class="btn">Sign In</a>
		<a href="/auth/sign-up" class="btn btn-primary">Get Started</a>
	</SignedOut>

	<SignedIn>
		<a href="/dashboard" class="btn">Dashboard</a>
		<a href="/account/settings" class="btn">Settings</a>
	</SignedIn>
</nav>
```

--------------------------------

### Display User Button Component (Svelte)

Source: https://github.com/multiplehats/better-auth-ui-svelte/blob/main/README.md

Illustrates the usage of the `UserButton` component, which displays the user's avatar and a dropdown menu for actions like sign-out. The `align` prop can be used to control the dropdown's alignment. This component provides a convenient way to manage user-specific interactions.

```svelte
<script lang="ts">
	import { UserButton } from 'better-auth-ui-svelte';
</script>

<UserButton align="end" />
```

--------------------------------

### OrganizationSettingsCards Component in Svelte

Source: https://context7.com/multiplehats/better-auth-ui-svelte/llms.txt

Provides a comprehensive UI for managing organization settings, including name, slug, logo, members, invitations, and a danger zone. Custom styling for the cards can be applied using the 'classNames' prop.

```svelte
<script lang="ts">
	import { OrganizationSettingsCards } from 'better-auth-ui-svelte';
</script>

<div class="container max-w-2xl py-8">
	<OrganizationSettingsCards
		classNames={{
			cards: 'space-y-6',
			card: {
				base: 'border rounded-lg p-6'
			}
		}}
	/>
</div>
```

--------------------------------

### Use Individual SignInForm Component in Svelte

Source: https://context7.com/multiplehats/better-auth-ui-svelte/llms.txt

Demonstrates how to use the SignInForm component directly for custom placement and behavior within your Svelte application. This allows for more granular control over the sign-in process and its associated UI elements.

```svelte
<script lang="ts">
	import { SignInForm } from 'better-auth-ui-svelte';

	function handleSuccess() {
		console.log('User signed in successfully!');
	}
</script>

<SignInForm
	redirectTo="/dashboard"
	onSuccess={handleSuccess}
	classNames={{
		base: 'max-w-md mx-auto',
		input: 'bg-background',
		button: 'bg-primary text-primary-foreground',
		label: 'text-sm font-medium',
		error: 'text-destructive text-sm'
	}}
/>
```

--------------------------------

### Apply Custom Class Names to Svelte Components

Source: https://github.com/multiplehats/better-auth-ui-svelte/blob/main/README.md

Illustrates how to apply custom CSS classes to Svelte components for styling. It shows two methods: using the `className` prop for a single class and the `classNames` prop for granular control over different parts of a component.

```svelte
<SignInForm className="max-w-md mx-auto" />
```

```svelte
<AuthView
	path="sign-in"
	classNames={{
		base: 'border-2 border-primary',
		header: 'bg-primary/10',
		title: 'text-xl font-bold',
		footerLink: 'text-primary hover:underline'
	}}
/>
```

--------------------------------

### TypeScript Exports for Better Auth UI Svelte

Source: https://github.com/multiplehats/better-auth-ui-svelte/blob/main/README.md

This TypeScript code details the various exports from the Better Auth UI Svelte library. It includes component exports, path constants, path helper functions, utility functions, context helpers, localization objects, and type definitions.

```typescript
// Component exports
export { AuthView, AuthUIProvider, SignInForm, SignUpForm, UserButton, UserAvatar, ... };

// Path constants
export { authViewPaths, accountViewPaths, organizationViewPaths, adminViewPaths };

// Path helpers (unique to Svelte port)
export {
  getAuthPath,
  getAuthUrl,
  getAccountPath,
  getAccountUrl,
  getOrganizationPath,
  getOrganizationUrl,
  getAdminPath,
  getAdminUrl,
  getAllAuthPaths,
  getAllAccountPaths,
  getAllOrganizationPaths,
  getAllAdminPaths
};

// Utilities
export { createForm, getViewByPath };

// Context helpers
export { getAuthUIConfig, getAuthClient, getLocalization };

// Localization
export { authLocalization };

// Types
export type {
  AuthUIConfig,
  User,
  Session,
  AuthLocalization,
  PathConfig,
  AccountPathConfig,
  OrganizationPathConfig,
  AdminPathConfig,
  UserWithRole,
  Organization,
  OrganizationMember,
  OrganizationWithMembers,
  OrganizationInvitation,
  UsersAdminTableProps,
  OrganizationsAdminTableProps,
  AdminViewProps
};
```

--------------------------------

### SecuritySettingsCards Component in Svelte

Source: https://context7.com/multiplehats/better-auth-ui-svelte/llms.txt

Integrates security settings such as password changes, session management, passkeys, and two-factor authentication. Custom styling can be applied to the cards using the 'classNames' prop.

```svelte
<script lang="ts">
	import { SecuritySettingsCards } from 'better-auth-ui-svelte';
</script>

<div class="container max-w-2xl py-8">
	<h1 class="text-2xl font-bold mb-6">Security Settings</h1>

	<SecuritySettingsCards
		classNames={{
			cards: 'space-y-6',
			card: {
				base: 'border rounded-lg p-6'
			}
		}}
	/>
</div>
```

--------------------------------

### AdminView Component in Svelte

Source: https://context7.com/multiplehats/better-auth-ui-svelte/llms.txt

Renders an admin dashboard with user and organization management capabilities. Requires the Better Auth admin plugin. It accepts a 'path' prop to determine the view and allows custom CSS class names for styling.

```svelte
<script lang="ts">
	import { AdminView } from 'better-auth-ui-svelte';
	import type { PageProps } from './$types.js';

	let { params }: PageProps = $props();
</script>

<AdminView
	path={params.path}
	classNames={{
		base: 'container mx-auto py-8',
		tabs: {
			root: 'w-full',
			list: 'grid-cols-3',
			trigger: 'data-[state=active]:bg-primary'
		}
	}}
/>

<!--
Creates admin routes at:
- /admin/dashboard - Overview with stats and charts
- /admin/users - User management table
- /admin/organizations - Organization management table
-->
```

--------------------------------

### Svelte UserButton Component for User Menu

Source: https://context7.com/multiplehats/better-auth-ui-svelte/llms.txt

Displays a user dropdown menu, typically including the user's avatar, account switching options, and navigation links. It supports customization of alignment, size, additional links, and CSS class names.

```svelte
<script lang="ts">
	import { UserButton } from 'better-auth-ui-svelte';
</script>

<header class="flex items-center justify-between p-4">
	<h1>My App</h1>

	<UserButton
		align="end"
		size="default"
		additionalLinks={[
			{
				href: '/billing',
				label: 'Billing',
				signedIn: true,
				separator: true
			},
			{
				href: '/help',
				label: 'Help Center'
			}
		]}
		classNames={{
			base: 'size-10',
			trigger: { base: 'rounded-full' },
			content: {
				base: 'w-64',
				menuItem: 'cursor-pointer'
			}
		}}
	/>
</header>
```

--------------------------------

### Configure Tailwind CSS for Better Auth UI Svelte

Source: https://github.com/multiplehats/better-auth-ui-svelte/blob/main/README.md

Configures Tailwind CSS for Better Auth UI Svelte. For Tailwind CSS v4, import 'better-auth-ui-svelte/css' in your global CSS. For v3 (deprecated), specify the path in your Tailwind config's content array.

```css
/* app.css or global.css */
@import 'better-auth-ui-svelte/css';
```

```js
content: ['./node_modules/better-auth-ui-svelte/dist/**/*.{js,svelte}'];
```

--------------------------------

### OrganizationSwitcher Component in Svelte

Source: https://context7.com/multiplehats/better-auth-ui-svelte/llms.txt

Enables users to switch between different organizations via a dropdown menu. It accepts alignment, size, and callback props for handling organization changes and custom styling for the trigger and menu.

```svelte
<script lang="ts">
	import { OrganizationSwitcher } from 'better-auth-ui-svelte';
	import type { Organization } from 'better-auth/plugins/organization';

	function handleOrgChange(org: Organization | null) {
		console.log('Switched to:', org?.name ?? 'Personal Account');
	}
</script>

<OrganizationSwitcher
	align="start"
	size="default"
	onSetActive={handleOrgChange}
	hidePersonal={false}
	classNames={{
		trigger: { base: 'w-64' },
		content: {
			base: 'w-64',
			menuItem: 'cursor-pointer'
		}
	}}
/>
```

--------------------------------

### Svelte UserAvatar Component

Source: https://context7.com/multiplehats/better-auth-ui-svelte/llms.txt

Displays a user's avatar, with a fallback mechanism to show the user's initials if the avatar image is unavailable. It accepts user data and custom class names for styling.

```svelte
<script lang="ts">
	import { UserAvatar } from 'better-auth-ui-svelte';
	import { getAuthClient } from 'better-auth-ui-svelte';

	const authClient = getAuthClient();
	const session = authClient.useSession();
	const user = $derived($session.data?.user);
</script>

<UserAvatar
	{user}
	class="size-12"
	classNames={{
		image: 'rounded-full',
		fallback: 'bg-primary text-primary-foreground'
	}}
/>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.