KQ-523 · EDIT/BUBBLE

Edit Bubble

Inline editing without a modal. A pencil hint appears on hover, and clicking morphs the value into a field: reading state and bubble share a layoutId, so the box grows on snap with one crisp overshoot while the text keeps its place. Enter saves and the new value lands on recoil like a stamp, Escape restores, blurring saves, and a blocked save nudges the bubble four pixels and prints the reason where the label sits.

KQ-523 · EDIT/BUBBLE

GaugeworksProject

Project name

Monthly budget · USD

Saved Relay bench rebuild · 4200

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/edit-bubble

Props

value: string; default —; Current value. The reading state mirrors it; each edit starts from it.
onSave: (value: string) => void | Promise<void>; default —; Called on commit. Return a promise to hold the bubble open while it saves; a rejection keeps the edit and shows a reason.
validate: (value: string) => string | null; default —; Return a reason to block the save; null lets it through.
type: "text" | "number"; default "text"; Input type; number also sets a decimal inputMode.
label: string; default —; Accessible name of the field, also shown above it.
className: string; default —; Applied to the field wrapper.

Prop	Type	Default	Description
value	string	—	Current value. The reading state mirrors it; each edit starts from it.
onSave	(value: string) => void \| Promise<void>	—	Called on commit. Return a promise to hold the bubble open while it saves; a rejection keeps the edit and shows a reason.
validate	(value: string) => string \| null	—	Return a reason to block the save; null lets it through.
type	"text" \| "number"	"text"	Input type; number also sets a decimal inputMode.
label	string	—	Accessible name of the field, also shown above it.
className	string	—	Applied to the field wrapper.