An account settings screen with vertical tabs for profile, notifications, security and billing. A save bar slides up as soon as anything changes.
This is how other people in the workspace see you.
npx shadcn@latest add https://hyperblur.dev/r/app-settings-page.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/app-settings-page.tsx.
import { AppSettingsPage } from "@/components/hyperblur/app-settings-page"
<AppSettingsPage onSave={(values) => console.log(values)} />| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValues | Partial<AppSettingsValues> | Saved values for name, email, username, bio, timezone and the notification and security toggles. Missing keys use the built-in sample. | |
| initialChanges | Partial<AppSettingsValues> | Unsaved edits applied on top of the saved values at mount, so the save bar starts open. | |
| defaultTab | "profile" | "notifications" | "security" | "billing" | "profile" | Tab shown first. |
| workspace | string | "Northwind Studio" | Workspace name in the sidebar header. |
| plan | string | "Pro plan · 8 seats" | Line under the workspace name. |
| accent | string | "#2f7bff" | Accent color for the active tab, switches and primary buttons. |
| onSave | (values: AppSettingsValues) => void | Called with every value when Save changes is pressed or Cmd/Ctrl + S is used. | |
| onTabChange | (tab: AppSettingsTab) => void | Called when the active tab changes. |