Components
<ChangeEmailCard />
The <ChangeEmailCard /> component provides a simple and secure UI that allows users to change their account email address, including verification emails sent to the updated address, if email verification is enabled.
Usage
Here's how to implement <ChangeEmailCard /> on your custom settings page:
import { ChangeEmailCard } from "@daveyplate/better-auth-ui"
export default function SettingsPage() {
return (
<div className="flex flex-col gap-6">
<ChangeEmailCard />
</div>
)
}The component automatically integrates with your AuthUIProvider context and handles email verification workflows seamlessly.
Reference
These are the available props for <ChangeEmailCard />:
| Prop | Type | Default |
|---|---|---|
action? | (() => unknown) | - |
localization? | Partial<{ INVALID_USERNAME_OR_PASSWORD: string; EMAIL_NOT_VERIFIED: string; UNEXPECTED_ERROR: string; USERNAME_IS_ALREADY_TAKEN: string; USERNAME_TOO_SHORT: string; USERNAME_TOO_LONG: string; ... 355 more ...; SLUG_DOES_NOT_MATCH: string; }> | - |
variant? | "default" | "destructive" | - |
optimistic? | boolean | - |
isPending? | boolean | - |
disabled? | boolean | - |
isSubmitting? | boolean | - |
actionLabel? | any | - |
instructions? | any | - |
description? | any | - |
title? | any | - |
classNames? | SettingsCardClassNames | - |
className? | string | - |
children? | any | - |
Styling
You can customize the styles using the provided classNames prop:
<ChangeEmailCard
classNames={{
base: "border-primary shadow",
header: "bg-primary-foreground text-primary",
title: "text-xl font-semibold",
description: "text-muted-foreground",
content: "bg-background",
footer: "bg-muted",
input: "bg-transparent border-primary placeholder:text-muted-foreground"
}}
/>Localization
You can pass custom text via the localization prop:
<ChangeEmailCard
localization={{
EMAIL: "Your Email",
EMAIL_DESCRIPTION: "You can update your email here.",
EMAIL_INSTRUCTIONS: "We'll send you a verification link to your new email address.",
EMAIL_PLACEHOLDER: "you@example.com",
EMAIL_VERIFY_CHANGE: "Check your inbox for the verification link!"
}}
/>