Components
Account Settings
Modular cards for managing user account information like email, name, and profile picture.
The Account Settings cards provide a modular way to build a profile management page. You can use the collective <AccountSettingsCards /> component or individual cards.
Installation
pnpm dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/account.jsonnpx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/account.jsonyarn dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/account.jsonbun x shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/account.jsonUsage
import { AccountSettingsCards } from "@/components/settings/account-settings-cards";
export default function SettingsPage() {
return (
<div className="space-y-6">
<AccountSettingsCards />
</div>
);
}Included Cards
- Update Name: Change the user's display name.
- Update Email: Change the user's email address (with verification support).
- User Avatar: Upload and manage profile pictures.
- Delete Account: Secure account deletion flow.
Reference
| Prop | Type | Default |
|---|---|---|
localization? | Partial<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; }>> | - |
classNames? | { card?: SettingsCardClassNames | undefined; cards?: string | undefined; } | - |
className? | string | - |