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.
Installation
pnpm dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/change-email-card.jsonnpx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/change-email-card.jsonyarn dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/change-email-card.jsonbun x shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/change-email-card.jsonUsage
Here's how to implement <ChangeEmailCard /> on your custom settings page:
import { ChangeEmailCard } from "@/components/settings/account/change-email-card";
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; ... 358 more ...; UNKNOWN: 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!",
}}
/>