Settings Page
A contained settings shell with vertical section tabs, profile with avatar upload, notification switches, plan and usage meters, a typed-confirm danger zone and a floating save bar that appears when the draft is dirty.
Preview
Profile
How you appear to your team.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValues | SettingsValues | — | Saved values (name, email, username, bio, avatar, notifications). The draft is compared against them. |
| notificationGroups | { title, items: { id, label, description? }[] }[] | [] | Switch rows on the Notifications section. |
| plan | SettingsPlan | — | Plan name, price, period, renewsOn, paymentMethod and usage meters. |
| workspace | string | "workspace" | Shown in the rail and typed to confirm deletion. |
| onSave | (values) => Promise<void> | void | — | Save the draft; also bound to Cmd/Ctrl+S. |
| onDeleteWorkspace | () => void | — | Called after the typed confirm. Omit to hide the danger zone. |
| onChangePlan | () => void | — | Shows the Change plan button. |
| onExport | () => void | — | Shows the export card. |
| defaultSection | "profile" | "notifications" | "billing" | "advanced" | "profile" | Section open on first render. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.