Account Settings
Installation
Run the following command
npx vibes@latest add account-settingsUsage
import { AccountSettingsSection } from '@/vibes/soul/sections/account-settings';function Usage() { return ( <AccountSettingsSection account={{ firstName: '', lastName: '', email: '' }} changePasswordAction={changePasswordAction} updateAccountAction={updateAccountAction} /> );}API Reference
AccountSettingsProps
| Prop | Type | Default |
|---|---|---|
title | string | 'Account Settings' |
account* | Account | |
updateAccountAction* | UpdateAccountAction | |
updateAccountSubmitLabel | string | |
changePasswordTitle | string | 'Change Password' |
changePasswordAction* | ChangePasswordAction | |
changePasswordSubmitLabel | string |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --account-settings-section-font-family: var(--font-family-heading); --account-settings-section-text: var(--foreground); --account-settings-section-border: var(--contrast-100);}