shadcn.io is not affiliated with official shadcn/ui
Account Setup Checklist Success Block for Solid
A welcome page after sign-up: what happened, then a five-task setup checklist in an accordion where one task is open at a time, each with its own control, a count and a progress bar, and one primary that opens the app.
Installation
Overview
Turn a new account into a first session with this welcome page for Solid with Ark UI. It's the page Pebblestack, a notes app, shows after sign-up: the page's side rails and one band frame a check in a tile, a heading, one sentence, the one Shine Button that opens the app, and a short list of what happened (the account, the plan, the day). Under it one framed card holds a setup checklist: a count and a Progress bar over five tasks in an Accordion where exactly one is open. Account created is already done; Verify your email has a Resend button, Name your workspace has an Input in a Field whose Save ticks the task and moves the count, Connect a notes source has a button, and Invite a teammate has a Copy Button that really copies a sample link. Guides draws the lines, with a CSS entrance only. For sign-up, onboarding and any first-run page.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was created or sent: the page confirms an account that already exists. Resend email, Save and Choose a source only change this page and say so in the line under the checklist ("Resent to jules@example.com in this demo. Nothing was sent."). Copy link is the exception, because the browser really does it: it writes a sample link to the clipboard. To wire it, read each task's state from your account, call your own endpoints from resend and saveName, and point the primary at the app.
Why is exactly one task open, and does the page move when I change it?
The checklist is a single-open accordion that can't be fully closed, and every open task is as tall as the tallest one, so choosing another never changes the page's height. Arrow keys move between the task headings, Home and End jump to the first and last.
How does naming the workspace work?
Save checks the name (two letters or more) and, when it's wrong, shows the problem under the field in a slot that is always there, so nothing moves, and puts focus back in the field. A good name ticks the task, the count reads 2 of 5 done and the bar grows. Saving the same name again says so instead of pretending it changed.
Where do the count and the bar come from?
From the tasks themselves. A task is done when its state says so (the account always, the workspace once it has a saved name), the count is worked out from that list and the bar is the same share, so adding a task to TASKS changes both. The state is a mark and the word "Done" or "To do", never a color alone.
Where does the button go?
The primary is a link to your own route. It's a Shine Button rendered as a link through the framework's own as-child mechanism. It sits right under the opening sentence, so it is on the first screen on a phone as well.
How does it look on a phone?
The heading, the sentence and the button come first, then the plan and the day side by side, then the checklist full width; each open task's control is a full-height button or field. The account's address is hidden in the list on a phone (it appears again in the verification task).