# Account components

> 8 Account components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: AccountSettings, AvatarUpload, ChangePasswordForm, NotificationPreferences, ProfileCard, ProfileForm, SettingsSections, WorkspaceSettings.

Source: https://docs.nasaqui.com/components/groups/account

- [AccountSettings](https://docs.nasaqui.com/components/account-settings): The account settings page layout. A title, a section nav (vertical on desktop, tabs on mobile) and a content area, plus SettingsSection blocks and a DangerZone with typed delete confirmation.
- [AvatarUpload](https://docs.nasaqui.com/components/avatar-upload): A profile photo with change, remove and a square crop editor (drag or arrow keys to pan, slider or +/- to zoom) drawn on a canvas. Pick by click, drop or paste. It hands your async callback a cropped File.
- [ChangePasswordForm](https://docs.nasaqui.com/components/change-password-form): Change-password form with current, new (strength meter) and confirm fields, an option to sign out other sessions, client checks, server field errors and a success message, driven by one async onSubmit.
- [NotificationPreferences](https://docs.nasaqui.com/components/notification-preferences): The notification settings screen. A matrix of kinds by channel (email, push, WhatsApp, desktop), quiet hours, a daily cap with batching, a digest schedule and extra email or webhook destinations with a test send. Every change saves at once and rolls back if it fails.
- [ProfileCard](https://docs.nasaqui.com/components/profile-card): A person's account card (avatar, name, role, presence, local time, team, quick actions) that opens from any avatar, name or mention on hover, focus or tap, plus the mention chip and presence dot it is built from.
- [ProfileForm](https://docs.nasaqui.com/components/profile-form): The profile settings form. Photo, display name, username with a live availability check, email with a verified badge, resend and a password-protected change, phone, bio, language and time zone, and a sticky Save / Discard bar that shows only when something changed.
- [SettingsSections](https://docs.nasaqui.com/components/settings-sections): A settings page with grouped sections in a nav, search across every setting, and a sticky save bar that shows unsaved changes.
- [WorkspaceSettings](https://docs.nasaqui.com/components/workspace-settings): Create and manage workspaces. A first-run onboarding page, a create dialog for the workspace switcher, a list of your workspaces, and a settings page with rename, address, picture, leave and type-to-confirm delete.