shadcn.io is not affiliated with official shadcn/ui
Inline Editing Stepper Block for React Aria
A four-step kickoff template whose step titles and notes are editable in place, with Enter to save, Escape to cancel, an edited-titles count and a Reset button.
Installation
Overview
Let people make a template their own without leaving it, with this inline-editing stepper for React with React Aria. A hairline frame with plus marks holds a vertical Steps rail of four numbered steps (Define scope, Set budget, Assign team and Kick off). Each row has its title and a one-line note as an Editable: a pencil or a click turns the text into a field, Enter saves and Escape cancels, and the button on the rail wraps only the numbered circle, so no field ever sits inside a button. A saved name shows in the open step's panel at once, the header counts "Edited 2 of 4 titles", and Reset restores the template. An empty save keeps the old text. Back is free, the foot has the block's one Shine Button, and a polite line says what each edit did. For templates, checklists, playbooks and any list a team renames.
FAQ
How does editing work?
Each text is an Editable with two copies of its value: the draft you are typing and the saved text the preview shows. Enter commits the draft, Escape or clicking away puts the saved text back, and an empty commit is refused with a note. Titles stop at 32 characters and notes at 60.
How does the keyboard work?
The rail is one tab stop on the current step: arrow keys move between steps and Enter opens one. Each text has an always-visible pencil that Tab reaches, so every edit has a keyboard route; once editing, Enter saves and Escape cancels, and Tab moves on.
How is the edited count worked out?
By comparing each saved title with the template's own, so typing a title back to the original lowers the count again. Notes are not counted.
What stays local?
Both lists of text, the saved and the draft, are component state, lost on reload, and nothing is created. To persist, send the saved list from the commit handler and start from what your server returns.