Setup Complete Recap Onboarding Block for React

Press a name, or the pencil, and it becomes a field with a check and a cross; Enter or the check saves it, Escape or the cross keeps the old one. A name can't be saved empty: the old one comes back and the status says so. Saving updates the greeting above. It changes only this page's state; in your app send the new name to your server in commit and keep the old one if it refuses.

They're typed at the top of the file: START holds the two names, INVITES the people invited (the count is derived, never typed twice), SECONDS how long the setup took (written as minutes and seconds) and STEP and STEPS where this screen is. In your app fill them from what the person chose; the three rows that aren't edited here link to the Settings page that does.

It's the catalog Confetti in the theme's own colours, behind the content and hidden from assistive technology. It falls for four seconds, fades out and is removed; Replay confetti starts it again with a status message. With reduced motion set it isn't shown at all, and the replay button is hidden too, so nothing moves.

Here it only sets a polite status message, opened in this demo, and nothing loads. In your app make it a link or navigate in open. Keep it the one primary action on the page: the recap is for checking and editing, not for more tasks.

Yes. The page has one heading and the recap's title is a level 2 heading; the recap is a description list with each value tied to its label, every pencil, check and cross has a name that says what it edits, and the results are read out through one polite status message. The confetti is decorative and hidden from assistive technology.

The three figures stay in a row, the list rows stack their value over “Change in Settings”, and a long name is cut short with an ellipsis in its field. Open the dashboard sticks to the foot of the screen so it's always in reach.