@better-auth-ui/react 1.6.0

package/dist/components/auth/auth-provider.d.ts

@@ -0,0 +1,32 @@
+import { type AnyAuthClient, type AnyAuthConfig, type AuthConfig } from "@better-auth-ui/react";
+import { QueryClient } from "@tanstack/react-query";
+import { type PropsWithChildren } from "react";
+export type AuthProviderProps = PropsWithChildren<AnyAuthConfig> & {
+    authClient: AnyAuthClient;
+    navigate: (options: {
+        to: string;
+        replace?: boolean;
+    }) => void;
+    /**
+     * TanStack QueryClient to use for your application's queries
+     */
+    queryClient?: QueryClient;
+};
+/**
+ * Provides merged authentication configuration and a resolved React Query client to descendant components.
+ *
+ * The component merges the provided auth config with the library defaults, updates `redirectTo` from the
+ * current URL when the app is hydrated, wires a QueryClient (prop, context, or fallback) and installs an
+ * error handler that surfaces query errors via the configured toast. It then supplies the merged config
+ * via AuthContext and wraps children with QueryClientProvider.
+ *
+ * @returns The children wrapped with AuthContext.Provider and QueryClientProvider configured for auth.
+ */
+export declare function AuthProvider({ children, queryClient, ...config }: AuthProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Accesses the current authentication configuration from AuthContext.
+ *
+ * @returns The merged authentication configuration provided by AuthProvider.
+ * @throws If no AuthProvider is present in the component tree.
+ */
+export declare function useAuth(): AuthConfig;

package/dist/components/auth/auth-provider.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { deepmerge, defaultAuthConfig } from "@better-auth-ui/core";
+import { AuthContext } from "@better-auth-ui/react";
+import { QueryClient, QueryClientContext, QueryClientProvider } from "@tanstack/react-query";
+import { useContext } from "react";
+const fallbackQueryClient = new QueryClient();
+const baseAuthConfig = {
+    ...defaultAuthConfig,
+    Link: (props) => _jsx("a", { ...props })
+};
+/**
+ * Provides merged authentication configuration and a resolved React Query client to descendant components.
+ *
+ * The component merges the provided auth config with the library defaults, updates `redirectTo` from the
+ * current URL when the app is hydrated, wires a QueryClient (prop, context, or fallback) and installs an
+ * error handler that surfaces query errors via the configured toast. It then supplies the merged config
+ * via AuthContext and wraps children with QueryClientProvider.
+ *
+ * @returns The children wrapped with AuthContext.Provider and QueryClientProvider configured for auth.
+ */
+export function AuthProvider({ children, queryClient, ...config }) {
+    const contextQueryClient = useContext(QueryClientContext);
+    const resolvedQueryClient = queryClient || contextQueryClient || fallbackQueryClient;
+    const mergedConfig = deepmerge(baseAuthConfig, config);
+    mergedConfig.redirectTo =
+        (typeof window !== "undefined" &&
+            new URLSearchParams(window.location.search).get("redirectTo")?.trim()) ||
+            mergedConfig.redirectTo;
+    return (_jsx(AuthContext.Provider, { value: mergedConfig, children: _jsx(QueryClientProvider, { client: resolvedQueryClient, children: children }) }));
+}
+/**
+ * Accesses the current authentication configuration from AuthContext.
+ *
+ * @returns The merged authentication configuration provided by AuthProvider.
+ * @throws If no AuthProvider is present in the component tree.
+ */
+export function useAuth() {
+    const context = useContext(AuthContext);
+    if (!context) {
+        throw new Error("[Better Auth UI] AuthProvider is required");
+    }
+    return context;
+}

package/dist/components/email/email-changed.d.ts

@@ -0,0 +1,97 @@
+import type { ReactNode } from "react";
+import { type EmailClassNames, type EmailColors } from "./email-styles";
+declare const emailChangedEmailLocalization: {
+    YOUR_EMAIL_ADDRESS_HAS_BEEN_CHANGED: string;
+    LOGO: string;
+    EMAIL_ADDRESS_CHANGED: string;
+    EMAIL_ADDRESS_FOR_YOUR_ACCOUNT_CHANGED: string;
+    PREVIOUS_EMAIL: string;
+    NEW_EMAIL: string;
+    IF_YOU_MADE_THIS_CHANGE: string;
+    I_DIDNT_MAKE_THIS_CHANGE: string;
+    EMAIL_SENT_BY: string;
+    IF_YOU_DIDNT_AUTHORIZE_THIS_CHANGE: string;
+    POWERED_BY_BETTER_AUTH: string;
+};
+/**
+ * Localization strings for the EmailChangedEmail component.
+ *
+ * Contains all text content used in the email changed notification email template.
+ */
+export type EmailChangedEmailLocalization = typeof emailChangedEmailLocalization;
+/**
+ * Props for the EmailChangedEmail component.
+ */
+export interface EmailChangedEmailProps {
+    /** The previous email address that was changed */
+    oldEmail?: string;
+    /** The new email address */
+    newEmail?: string;
+    /** URL to revert the email change if unauthorized */
+    revertURL?: string;
+    /** Name of the application sending the email */
+    appName?: string;
+    /** Support email address for security concerns */
+    supportEmail?: string;
+    /** Logo URL(s) - a single string or light/dark variants. If omitted, no logo is shown. */
+    logoURL?: string | {
+        light: string;
+        dark: string;
+    };
+    /** Custom CSS class names for styling specific parts of the email */
+    classNames?: EmailClassNames;
+    /** Custom color scheme for light and dark modes */
+    colors?: EmailColors;
+    /** Whether to show the "Powered by better-auth" footer */
+    poweredBy?: boolean;
+    /** Whether to enable dark mode support */
+    darkMode?: boolean;
+    /** Additional React nodes to inject into the email head */
+    head?: ReactNode;
+    /**
+     * Localization overrides for customizing email text
+     * @remarks `EmailChangedEmailLocalization`
+     */
+    localization?: Partial<EmailChangedEmailLocalization>;
+}
+/**
+ * Email template component that notifies users when their email address has been changed.
+ *
+ * This email includes:
+ * - Display of both old and new email addresses
+ * - Revert action button if unauthorized change occurred
+ * - Security information and support contact details
+ * - Customizable branding and styling
+ * - Support for light/dark mode themes
+ *
+ * @example
+ * ```tsx
+ * <EmailChangedEmail
+ *   oldEmail="old@example.com"
+ *   newEmail="new@example.com"
+ *   revertURL="https://example.com/revert?token=abc123"
+ *   appName="My App"
+ *   supportEmail="support@example.com"
+ *   logoURL="https://example.com/logo.png"
+ *   darkMode={true}
+ * />
+ * ```
+ */
+export declare const EmailChangedEmail: {
+    ({ oldEmail, newEmail, revertURL, appName, supportEmail, logoURL, colors, classNames, darkMode, poweredBy, head, ...props }: EmailChangedEmailProps): import("react/jsx-runtime").JSX.Element;
+    localization: {
+        YOUR_EMAIL_ADDRESS_HAS_BEEN_CHANGED: string;
+        LOGO: string;
+        EMAIL_ADDRESS_CHANGED: string;
+        EMAIL_ADDRESS_FOR_YOUR_ACCOUNT_CHANGED: string;
+        PREVIOUS_EMAIL: string;
+        NEW_EMAIL: string;
+        IF_YOU_MADE_THIS_CHANGE: string;
+        I_DIDNT_MAKE_THIS_CHANGE: string;
+        EMAIL_SENT_BY: string;
+        IF_YOU_DIDNT_AUTHORIZE_THIS_CHANGE: string;
+        POWERED_BY_BETTER_AUTH: string;
+    };
+    PreviewProps: EmailChangedEmailProps;
+};
+export default EmailChangedEmail;

package/dist/components/email/email-changed.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Body, Button, Container, Head, Heading, Hr, Html, Img, Link, Preview, pixelBasedPreset, Section, Tailwind, Text } from "@react-email/components";
+import { cn } from "../../lib/utils";
+import { EmailStyles } from "./email-styles";
+const emailChangedEmailLocalization = {
+    YOUR_EMAIL_ADDRESS_HAS_BEEN_CHANGED: "Your email address has been changed",
+    LOGO: "Logo",
+    EMAIL_ADDRESS_CHANGED: "Email address changed",
+    EMAIL_ADDRESS_FOR_YOUR_ACCOUNT_CHANGED: "The email address for your {appName} account has been changed.",
+    PREVIOUS_EMAIL: "Previous email:",
+    NEW_EMAIL: "New email:",
+    IF_YOU_MADE_THIS_CHANGE: "If you made this change, you can safely ignore this email.",
+    I_DIDNT_MAKE_THIS_CHANGE: "I didn't make this change",
+    EMAIL_SENT_BY: "Email sent by {appName}.",
+    IF_YOU_DIDNT_AUTHORIZE_THIS_CHANGE: "If you didn't authorize this change, please contact support immediately {supportEmail} to secure your account.",
+    POWERED_BY_BETTER_AUTH: "Powered by {betterAuth}"
+};
+/**
+ * Email template component that notifies users when their email address has been changed.
+ *
+ * This email includes:
+ * - Display of both old and new email addresses
+ * - Revert action button if unauthorized change occurred
+ * - Security information and support contact details
+ * - Customizable branding and styling
+ * - Support for light/dark mode themes
+ *
+ * @example
+ * ```tsx
+ * <EmailChangedEmail
+ *   oldEmail="old@example.com"
+ *   newEmail="new@example.com"
+ *   revertURL="https://example.com/revert?token=abc123"
+ *   appName="My App"
+ *   supportEmail="support@example.com"
+ *   logoURL="https://example.com/logo.png"
+ *   darkMode={true}
+ * />
+ * ```
+ */
+export const EmailChangedEmail = ({ oldEmail, newEmail, revertURL, appName, supportEmail, logoURL, colors, classNames, darkMode = true, poweredBy, head, ...props }) => {
+    const localization = {
+        ...EmailChangedEmail.localization,
+        ...props.localization
+    };
+    const previewText = localization.YOUR_EMAIL_ADDRESS_HAS_BEEN_CHANGED;
+    return (_jsxs(Html, { children: [_jsxs(Head, { children: [_jsx("meta", { content: "light dark", name: "color-scheme" }), _jsx("meta", { content: "light dark", name: "supported-color-schemes" }), _jsx(EmailStyles, { colors: colors, darkMode: darkMode }), head] }), _jsx(Preview, { children: previewText }), _jsx(Tailwind, { config: { presets: [pixelBasedPreset] }, children: _jsx(Body, { className: cn("bg-background font-sans", classNames?.body), children: _jsx(Container, { className: cn("mx-auto my-auto max-w-xl px-2 py-10", classNames?.container), children: _jsxs(Section, { className: cn("bg-card text-card-foreground rounded-none border border-border p-8", classNames?.card), children: [logoURL &&
+                                    (typeof logoURL === "string" ? (_jsx(Img, { src: logoURL, width: 48, height: 48, alt: appName || localization.LOGO, className: cn("mx-auto mb-8", classNames?.logo) })) : (_jsxs(_Fragment, { children: [_jsx(Img, { src: logoURL.light, width: 48, height: 48, alt: appName || localization.LOGO, className: cn("mx-auto mb-8 logo-light", classNames?.logo) }), _jsx(Img, { src: logoURL.dark, width: 48, height: 48, alt: appName || localization.LOGO, className: cn("hidden mx-auto mb-8 logo-dark", classNames?.logo) })] }))), _jsx(Heading, { className: cn("m-0 mb-5 text-2xl font-semibold", classNames?.title), children: localization.EMAIL_ADDRESS_CHANGED }), _jsx(Text, { className: cn("text-sm font-normal", classNames?.content), children: localization.EMAIL_ADDRESS_FOR_YOUR_ACCOUNT_CHANGED.replace("{appName}", appName || "")
+                                        .replace(/\s{2,}/g, " ")
+                                        .replace(" .", ".") }), (oldEmail || newEmail) && (_jsxs(Section, { className: cn("my-6 border border-border bg-muted p-4", classNames?.codeBlock), children: [oldEmail && (_jsxs(_Fragment, { children: [_jsx(Text, { className: cn("m-0 mb-2 text-xs text-muted-foreground", classNames?.description), children: localization.PREVIOUS_EMAIL }), _jsx(Text, { className: cn("m-0 mb-4 text-sm font-semibold", classNames?.content), children: oldEmail })] })), newEmail && (_jsxs(_Fragment, { children: [_jsx(Text, { className: cn("m-0 mb-2 text-xs text-muted-foreground", classNames?.description), children: localization.NEW_EMAIL }), _jsx(Text, { className: cn("m-0 text-sm font-semibold text-primary", classNames?.content), children: newEmail })] }))] })), _jsx(Text, { className: cn("text-sm font-normal", classNames?.content), children: localization.IF_YOU_MADE_THIS_CHANGE }), revertURL && (_jsx(Section, { className: "my-6", children: _jsx(Button, { href: revertURL, className: cn("inline-block whitespace-nowrap rounded-none text-sm font-medium py-2.5 px-6 bg-primary text-primary-foreground no-underline", classNames?.button), children: localization.I_DIDNT_MAKE_THIS_CHANGE }) })), _jsx(Hr, { className: cn("my-6 w-full border border-solid border-border", classNames?.separator) }), appName && (_jsx(Text, { className: cn("mb-3 text-xs text-muted-foreground", classNames?.description), children: localization.EMAIL_SENT_BY.replace("{appName}", appName) })), _jsx(Text, { className: cn("mt-3 text-xs text-muted-foreground", classNames?.description), children: (() => {
+                                        const [beforeSupportEmail, afterSupportEmail] = localization.IF_YOU_DIDNT_AUTHORIZE_THIS_CHANGE.split("{supportEmail}");
+                                        return supportEmail ? (_jsxs(_Fragment, { children: [beforeSupportEmail, _jsx(Link, { href: `mailto:${supportEmail}`, className: cn("text-primary underline", classNames?.link), children: supportEmail }), afterSupportEmail] })) : (localization.IF_YOU_DIDNT_AUTHORIZE_THIS_CHANGE.replace("{supportEmail}", "")
+                                            .replace(/\s{2,}/g, " ")
+                                            .replace(" .", "."));
+                                    })() }), poweredBy && (_jsx(Text, { className: cn("mt-4 mb-0 text-center text-[11px] text-muted-foreground", classNames?.poweredBy), children: (() => {
+                                        const [beforeBetterAuth, afterBetterAuth] = localization.POWERED_BY_BETTER_AUTH.split("{betterAuth}");
+                                        return (_jsxs(_Fragment, { children: [beforeBetterAuth, _jsx(Link, { href: "https://better-auth.com", className: cn("text-primary underline", classNames?.link), children: "better-auth" }), afterBetterAuth] }));
+                                    })() }))] }) }) }) })] }));
+};
+EmailChangedEmail.localization = emailChangedEmailLocalization;
+EmailChangedEmail.PreviewProps = {
+    oldEmail: "old@example.com",
+    newEmail: "new@example.com",
+    supportEmail: "support@example.com",
+    revertURL: "https://better-auth-ui.com/auth/revert-email?token=example-token",
+    appName: "Better Auth",
+    poweredBy: true,
+    darkMode: true
+};
+export default EmailChangedEmail;

package/dist/components/email/email-localization.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Aggregated localization strings for all email components.
+ *
+ * Combines localization strings from all email templates (EmailChangedEmail,
+ * EmailVerificationEmail, MagicLinkEmail, NewDeviceEmail, OtpEmail,
+ * PasswordChangedEmail, ResetPasswordEmail) into a single object for convenient
+ * bulk customization.
+ */
+export declare const emailLocalization: {
+    RESET_YOUR_PASSWORD: string;
+    LOGO: string;
+    WE_RECEIVED_REQUEST_TO_RESET_PASSWORD: string;
+    RESET_PASSWORD: string;
+    OR_COPY_AND_PASTE_URL: string;
+    THIS_LINK_EXPIRES_IN_MINUTES: string;
+    EMAIL_SENT_BY: string;
+    IF_YOU_DIDNT_REQUEST_PASSWORD_RESET: string;
+    POWERED_BY_BETTER_AUTH: string;
+    YOUR_PASSWORD_HAS_BEEN_CHANGED: string;
+    PASSWORD_CHANGED_SUCCESSFULLY: string;
+    PASSWORD_FOR_YOUR_ACCOUNT_CHANGED: string;
+    CHANGED_AT: string;
+    IF_YOU_MADE_THIS_CHANGE: string;
+    I_DIDNT_MAKE_THIS_CHANGE: string;
+    IF_YOU_DIDNT_AUTHORIZE_THIS_CHANGE: string;
+    YOUR_VERIFICATION_CODE_IS_CODE: string;
+    VERIFY_YOUR_EMAIL: string;
+    WE_NEED_TO_VERIFY_YOUR_EMAIL_ADDRESS: string;
+    THIS_CODE_EXPIRES_IN_MINUTES: string;
+    IF_YOU_DIDNT_REQUEST_THIS_EMAIL: string;
+    NEW_SIGN_IN_DETECTED: string;
+    NEW_SIGN_IN_TO_YOUR_ACCOUNT: string;
+    DEVICE_DETAILS: string;
+    BROWSER: string;
+    OPERATING_SYSTEM: string;
+    LOCATION: string;
+    IP_ADDRESS: string;
+    TIME: string;
+    IF_THIS_WAS_YOU: string;
+    SECURE_MY_ACCOUNT: string;
+    IF_YOU_DIDNT_SIGN_IN: string;
+    SIGN_IN_TO_APP_NAME: string;
+    SIGN_IN_TO_YOUR_ACCOUNT: string;
+    YOUR_ACCOUNT: string;
+    CLICK_BUTTON_TO_SIGN_IN: string;
+    VERIFY_YOUR_EMAIL_ADDRESS: string;
+    CLICK_BUTTON_TO_VERIFY_EMAIL: string;
+    VERIFY_EMAIL_ADDRESS: string;
+    YOUR_EMAIL_ADDRESS_HAS_BEEN_CHANGED: string;
+    EMAIL_ADDRESS_CHANGED: string;
+    EMAIL_ADDRESS_FOR_YOUR_ACCOUNT_CHANGED: string;
+    PREVIOUS_EMAIL: string;
+    NEW_EMAIL: string;
+};
+/**
+ * Type representing all available email localization strings.
+ *
+ * Derived from the emailLocalization constant, this type can be used for
+ * type-safe localization overrides across all email templates.
+ */
+export type EmailLocalization = typeof emailLocalization;

package/dist/components/email/email-localization.js

@@ -0,0 +1,24 @@
+import EmailChangedEmail from "./email-changed";
+import EmailVerificationEmail from "./email-verification";
+import MagicLinkEmail from "./magic-link";
+import NewDeviceEmail from "./new-device";
+import OtpEmail from "./otp-email";
+import PasswordChangedEmail from "./password-changed";
+import ResetPasswordEmail from "./reset-password";
+/**
+ * Aggregated localization strings for all email components.
+ *
+ * Combines localization strings from all email templates (EmailChangedEmail,
+ * EmailVerificationEmail, MagicLinkEmail, NewDeviceEmail, OtpEmail,
+ * PasswordChangedEmail, ResetPasswordEmail) into a single object for convenient
+ * bulk customization.
+ */
+export const emailLocalization = {
+    ...EmailChangedEmail.localization,
+    ...EmailVerificationEmail.localization,
+    ...MagicLinkEmail.localization,
+    ...NewDeviceEmail.localization,
+    ...OtpEmail.localization,
+    ...PasswordChangedEmail.localization,
+    ...ResetPasswordEmail.localization
+};

package/dist/components/email/email-styles.d.ts

@@ -0,0 +1,89 @@
+/**
+ * Default color scheme for email templates in light and dark modes.
+ *
+ * Provides a consistent color palette that can be customized via the EmailColors type.
+ */
+export declare const defaultColors: {
+    light: {
+        background: string;
+        border: string;
+        card: string;
+        cardForeground: string;
+        foreground: string;
+        muted: string;
+        mutedForeground: string;
+        primary: string;
+        primaryForeground: string;
+    };
+    dark: {
+        background: string;
+        border: string;
+        card: string;
+        cardForeground: string;
+        foreground: string;
+        muted: string;
+        mutedForeground: string;
+        primary: string;
+        primaryForeground: string;
+    };
+};
+/**
+ * Custom CSS class names for styling different parts of email templates.
+ *
+ * Allows fine-grained control over the appearance of email components.
+ */
+export type EmailClassNames = {
+    body?: string;
+    container?: string;
+    card?: string;
+    logo?: string;
+    title?: string;
+    content?: string;
+    button?: string;
+    description?: string;
+    separator?: string;
+    link?: string;
+    poweredBy?: string;
+    codeBlock?: string;
+};
+/**
+ * Custom color scheme configuration for email templates.
+ *
+ * Supports separate color definitions for light and dark modes.
+ * Any color not specified will fall back to the defaultColors values.
+ */
+export type EmailColors = {
+    light?: Partial<typeof defaultColors.light>;
+    dark?: Partial<typeof defaultColors.dark>;
+};
+/**
+ * Props for the EmailStyles component.
+ */
+interface EmailStylesProps {
+    /** Custom color scheme for light and dark modes */
+    colors?: EmailColors;
+    /** Whether to enable dark mode support */
+    darkMode?: boolean;
+}
+/**
+ * Component that injects CSS styles for email templates with support for light and dark modes.
+ *
+ * Generates inline styles that adapt to the user's color scheme preference and applies
+ * custom colors if provided. Handles logo visibility switching between light and dark modes.
+ *
+ * @param props - Style configuration options
+ * @returns A style element containing CSS for email template theming
+ *
+ * @example
+ * ```tsx
+ * <EmailStyles
+ *   colors={{
+ *     light: { primary: "#000000" },
+ *     dark: { primary: "#FFFFFF" }
+ *   }}
+ *   darkMode={true}
+ * />
+ * ```
+ */
+export declare const EmailStyles: ({ colors, darkMode }: EmailStylesProps) => import("react/jsx-runtime").JSX.Element;
+export default EmailStyles;

package/dist/components/email/email-styles.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Default color scheme for email templates in light and dark modes.
+ *
+ * Provides a consistent color palette that can be customized via the EmailColors type.
+ */
+export const defaultColors = {
+    light: {
+        background: "#F5F5F5",
+        border: "#E5E5E5",
+        card: "#FFFFFF",
+        cardForeground: "#0A0A0A",
+        foreground: "#262626",
+        muted: "#F5F5F5",
+        mutedForeground: "#737373",
+        primary: "#171717",
+        primaryForeground: "#FAFAFA"
+    },
+    dark: {
+        background: "#0A0A0A",
+        border: "#2E2E2E",
+        card: "#171717",
+        cardForeground: "#FAFAFA",
+        foreground: "#D4D4D4",
+        muted: "#212121",
+        mutedForeground: "#A1A1A1",
+        primary: "#E5E5E5",
+        primaryForeground: "#171717"
+    }
+};
+/**
+ * Component that injects CSS styles for email templates with support for light and dark modes.
+ *
+ * Generates inline styles that adapt to the user's color scheme preference and applies
+ * custom colors if provided. Handles logo visibility switching between light and dark modes.
+ *
+ * @param props - Style configuration options
+ * @returns A style element containing CSS for email template theming
+ *
+ * @example
+ * ```tsx
+ * <EmailStyles
+ *   colors={{
+ *     light: { primary: "#000000" },
+ *     dark: { primary: "#FFFFFF" }
+ *   }}
+ *   darkMode={true}
+ * />
+ * ```
+ */
+export const EmailStyles = ({ colors, darkMode = true }) => {
+    return (_jsx("style", { type: "text/css", children: `
+      .bg-background {
+        background-color: ${colors?.light?.background || defaultColors.light.background} !important;
+      }
+      .bg-card {
+        background-color: ${colors?.light?.card || defaultColors.light.card} !important;
+      }
+      .bg-primary {
+        background-color: ${colors?.light?.primary || defaultColors.light.primary} !important;
+      }
+      .bg-muted {
+        background-color: ${colors?.light?.muted || defaultColors.light.muted} !important;
+      }
+      .border-border {
+        border-color: ${colors?.light?.border || defaultColors.light.border} !important;
+      }
+      .text-card-foreground {
+        color: ${colors?.light?.cardForeground || defaultColors.light.cardForeground} !important;
+      }
+      .text-muted-foreground {
+        color: ${colors?.light?.mutedForeground || defaultColors.light.mutedForeground} !important;
+      }
+      .text-primary {
+        color: ${colors?.light?.primary || defaultColors.light.primary} !important;
+      }
+      .text-primary-foreground {
+        color: ${colors?.light?.primaryForeground || defaultColors.light.primaryForeground} !important;
+      }
+      .logo-dark {
+        display: none !important;
+      }
+      .logo-light {
+        display: block !important;
+      }
+
+      ${darkMode
+            ? `@media (prefers-color-scheme: dark) {
+        .bg-background {
+          background-color: ${colors?.dark?.background || defaultColors.dark.background} !important;
+        }
+        .bg-card {
+          background-color: ${colors?.dark?.card || defaultColors.dark.card} !important;
+        }
+        .bg-primary {
+          background-color: ${colors?.dark?.primary || defaultColors.dark.primary} !important;
+        }
+        .bg-muted {
+          background-color: ${colors?.dark?.muted || defaultColors.dark.muted} !important;
+        }
+        .border-border {
+          border-color: ${colors?.dark?.border || defaultColors.dark.border} !important;
+        }
+        .text-card-foreground {
+          color: ${colors?.dark?.cardForeground || defaultColors.dark.cardForeground} !important;
+        }
+        .text-muted-foreground {
+          color: ${colors?.dark?.mutedForeground || defaultColors.dark.mutedForeground} !important;
+        }
+        .text-primary {
+          color: ${colors?.dark?.primary || defaultColors.dark.primary} !important;
+        }
+        .text-primary-foreground {
+          color: ${colors?.dark?.primaryForeground || defaultColors.dark.primaryForeground} !important;
+        }
+        .logo-dark {
+          display: block !important;
+        }
+        .logo-light {
+          display: none !important;
+        }
+        * {
+          box-shadow: none !important;
+        }
+      }`
+            : ""}
+    ` }));
+};
+export default EmailStyles;

package/dist/components/email/email-verification.d.ts

@@ -0,0 +1,97 @@
+import type { ReactNode } from "react";
+import { type EmailClassNames, type EmailColors } from "./email-styles";
+declare const emailVerificationEmailLocalization: {
+    VERIFY_YOUR_EMAIL_ADDRESS: string;
+    LOGO: string;
+    CLICK_BUTTON_TO_VERIFY_EMAIL: string;
+    VERIFY_EMAIL_ADDRESS: string;
+    OR_COPY_AND_PASTE_URL: string;
+    THIS_LINK_EXPIRES_IN_MINUTES: string;
+    EMAIL_SENT_BY: string;
+    IF_YOU_DIDNT_REQUEST_THIS_EMAIL: string;
+    POWERED_BY_BETTER_AUTH: string;
+};
+/**
+ * Localization strings for the EmailVerificationEmail component.
+ *
+ * Contains all text content used in the email verification email template.
+ */
+export type EmailVerificationEmailLocalization = typeof emailVerificationEmailLocalization;
+/**
+ * Props for the EmailVerificationEmail component.
+ */
+export interface EmailVerificationEmailProps {
+    /** Verification URL that users must click to verify their email */
+    url: string;
+    /** Email address being verified */
+    email?: string;
+    /** Name of the application sending the email */
+    appName?: string;
+    /** Number of minutes until the verification link expires */
+    expirationMinutes?: number;
+    /** Logo URL(s) - a single string or light/dark variants. If omitted, no logo is shown. */
+    logoURL?: string | {
+        light: string;
+        dark: string;
+    };
+    /** Custom CSS class names for styling specific parts of the email */
+    classNames?: EmailClassNames;
+    /** Custom color scheme for light and dark modes */
+    colors?: EmailColors;
+    /** Whether to show the "Powered by better-auth" footer */
+    poweredBy?: boolean;
+    /** Whether to enable dark mode support */
+    darkMode?: boolean;
+    /** Additional React nodes to inject into the email head */
+    head?: ReactNode;
+    /**
+     * Localization overrides for customizing email text
+     * @remarks `EmailVerificationEmailLocalization`
+     */
+    localization?: Partial<EmailVerificationEmailLocalization>;
+}
+/**
+ * Email template component that sends email verification links to users.
+ *
+ * This email includes:
+ * - Verification button and fallback URL
+ * - Expiration time information
+ * - Security notice for unauthorized requests
+ * - Customizable branding and styling
+ * - Support for light/dark mode themes
+ *
+ * @example
+ * ```tsx
+ * <EmailVerificationEmail
+ *   url="https://example.com/verify?token=abc123"
+ *   email="user@example.com"
+ *   appName="My App"
+ *   expirationMinutes={60}
+ *   logoURL="https://example.com/logo.png"
+ *   darkMode={true}
+ * />
+ * ```
+ */
+export declare const EmailVerificationEmail: {
+    ({ url, email, appName, expirationMinutes, logoURL, colors, classNames, darkMode, poweredBy, head, ...props }: EmailVerificationEmailProps): import("react/jsx-runtime").JSX.Element;
+    /**
+     * Default localization strings for the email verification template.
+     * Can be overridden via the `localization` prop.
+     */
+    localization: {
+        VERIFY_YOUR_EMAIL_ADDRESS: string;
+        LOGO: string;
+        CLICK_BUTTON_TO_VERIFY_EMAIL: string;
+        VERIFY_EMAIL_ADDRESS: string;
+        OR_COPY_AND_PASTE_URL: string;
+        THIS_LINK_EXPIRES_IN_MINUTES: string;
+        EMAIL_SENT_BY: string;
+        IF_YOU_DIDNT_REQUEST_THIS_EMAIL: string;
+        POWERED_BY_BETTER_AUTH: string;
+    };
+    /**
+     * Example props for previewing the email template in development.
+     */
+    PreviewProps: EmailVerificationEmailProps;
+};
+export default EmailVerificationEmail;