Patterns
Account Settings
Account management panel with password change, email change, and danger zone.
Overview
The AccountSettings recipe provides a three-section account management panel: email change, password change, and a danger zone for account deletion. The delete action uses a confirmation Dialog.
Account
Manage account settings.
Change Password
Delete Account
Permanently remove your data
Usage
import { AccountSettings } from '@/recipes/account-settings';
<AccountSettings
email="john@example.com"
onChangePassword={({ current, newPassword }) => changePassword(current, newPassword)}
onChangeEmail={(email) => changeEmail(email)}
onDeleteAccount={() => deleteAccount()}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
email | string | — | Current email |
onChangePassword | (data: { current: string; newPassword: string }) => void | — | Password change handler |
onChangeEmail | (email: string) => void | — | Email change handler |
onDeleteAccount | () => void | — | Delete account handler |
className | string | — | Additional CSS classes |
Related Recipes
- Profile Settings — For profile editing
- Notification Settings — For notification preferences