A profile you edit in place, one row at a time, with Enter to save and Escape to cancel. A completion ring and hint track what is missing, and the avatar opens a color picker.
npx shadcn@latest add https://hyperblur.dev/r/form-profile-edit.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/form-profile-edit.tsx.
import { FormProfileEdit } from "@/components/hyperblur/form-profile-edit"
<FormProfileEdit onFieldSave={(field, value) => console.log(field, value)} />| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValues | Partial<FormProfileEditValues> | Initial name, handle, bio, location, website and avatar color index. | |
| bioMax | number | 160 | Maximum bio length. |
| accent | string | "#f472b6" | Accent color for focus rings, selected states and the primary button. |
| delay | number | 650 | Minimum time in milliseconds a row shows its saving state. |
| onFieldSave | (field, value, values) => void | Promise<void> | Called when a single field is saved. Reject to keep the row open. |