Account settings that track every edit: changed fields get a dot and a floating bar counts unsaved changes with Reset and Save. Supports Cmd+S and confirms with a green saved state.
npx shadcn@latest add https://hyperblur.dev/r/form-settings.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/form-settings.tsx.
import { FormSettings } from "@/components/hyperblur/form-settings"
<FormSettings onSave={(values, changed) => console.log(changed)} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Account settings" | Heading of the card. |
| string | "priya@lattice.dev" | Read-only email shown as verified. | |
| defaultValues | Partial<FormSettingsValues> | Current name, timezone, density and notification switches. | |
| savedValues | Partial<FormSettingsValues> | Last saved values to compare against. Defaults to defaultValues, so nothing starts dirty. | |
| timezones | string[] | 6 time zones | Options for the time zone select. |
| accent | string | "#6e8bff" | Accent color for focus rings, selected states and the primary button. |
| delay | number | 900 | Minimum time in milliseconds the loading state stays visible, so the transition never flickers. |
| onSave | (values: FormSettingsValues, changed: (keyof FormSettingsValues)[]) => void | Promise<void> | Called with all values and the list of changed keys. |