shadcn.io is not affiliated with official shadcn/ui
Setup Complete Recap Onboarding Block for Solid
A whole-screen finish for a project tracker's setup: a recap with three figures, two names edited in place, the theme, invites and connected tool with where to change them, one Open the dashboard button and a light confetti.
Installation
Overview
End the first run with what was decided, with this setup recap for Solid with Ark UI. It's the last step of Rookwold, a project tracker for agencies: the page's side rails run its full height and one band crosses the screen between two rules with a plus mark at each end. Under the step header (“Step 5 of 5” and a full hairline) a short greeting says the workspace and team are ready, and a framed panel recaps the setup: a band of three figures (steps, time, invites) over a Data List where the workspace name and the team name are Editable in place, and the theme, the invites and the connected tool each say where to change them. The greeting follows the names. Open the dashboard is the only colored control, a Shine Button. A light Confetti falls behind the band for four seconds, then fades, and Replay confetti sends it again; it never shows with reduced motion. Nothing was created: the results say so. For setup flows, onboarding finales and any “you're all set” page.
FAQ
How does editing in place work?
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.
Where do the recap's values come from?
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.
How does the confetti behave, and what about reduced motion?
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.
What does Open the dashboard do?
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.
Is it accessible?
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.