Account components
8 Account components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: AccountSettings, AvatarUpload, ChangePasswordForm, NotificationPreferences, ProfileCard, ProfileForm, SettingsSections, WorkspaceSettings.
- AccountSettingsThe 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.
- AvatarUploadA 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.
- ChangePasswordFormChange-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.
- NotificationPreferencesThe 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.
- ProfileCardA 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.
- ProfileFormThe 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.
- SettingsSectionsA settings page with grouped sections in a nav, search across every setting, and a sticky save bar that shows unsaved changes.
- WorkspaceSettingsCreate 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.
Changelog and versioning
This is the first public release. The components are used daily in the author's own products, but the API has not been through outside use, so treat everything as 0.x: minor versions may contain break
AccountSettings
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.