Components
<DeleteAccountCard />
The <DeleteAccountCard /> component provides users a streamlined UI to delete their account. It supports verification flows, such as password confirmation or email verification, before account deletion.
Installation
pnpm dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/delete-account-card.jsonnpx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/delete-account-card.jsonyarn dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/delete-account-card.jsonbun x shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/delete-account-card.jsonUsage
Include the <DeleteAccountCard /> component on your user settings page:
import { DeleteAccountCard } from "@/components/settings/account/delete-account-card";
export default function SettingsPage() {
return (
<div className="flex flex-col gap-6">
<DeleteAccountCard />
</div>
);
}This component leverages the AuthUIProvider context to handle account deletion (and optional verification) seamlessly.
Reference
These are the available props for <DeleteAccountCard />:
| Prop | Type | Default |
|---|---|---|
skipHook? | boolean | - |
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; }> | - |
isPending? | boolean | - |
accounts? | Account[] | null | - |
classNames? | SettingsCardClassNames | - |
className? | string | - |
Styling
You can customize styling using the provided classNames prop with TailwindCSS classes:
<DeleteAccountCard
classNames={{
base: "border-destructive",
header: "bg-destructive/10",
title: "text-destructive text-xl font-semibold",
description: "text-destructive",
footer: "bg-destructive/30",
button: "bg-destructive hover:bg-destructive/80 text-white",
}}
/>Localization
Adjust the text within the component for specific requirements or languages:
<DeleteAccountCard
localization={{
DELETE_ACCOUNT: "Delete My Account",
DELETE_ACCOUNT_DESCRIPTION:
"This action permanently deletes your account and is irreversible.",
DELETE_ACCOUNT_INSTRUCTIONS:
"Please provide your password to confirm deletion.",
DELETE_ACCOUNT_NOT_FRESH: "Sign out and back in to delete your account.",
}}
/>