shadcn.io is not affiliated with official shadcn/ui
Setup Progress Onboarding Block for Radix UI
A teachers' app's setup progress as a whole screen: a big rolling percent over a bar, a line of steps done and minutes to go, one button that finishes the next step, and three foldable bands that list every step as Done, Next up or To do.
Installation
Overview
Show new users how far along they are and what is next, with this progress screen for React with Radix UI. It is a whole page of Chalkhurst, a classroom-communication app for teachers: the page's rails and one band across the screen, a big percent that rolls as it changes, a Progress bar under it, and a line that works out how many steps are done and about how many minutes the rest will take. The one Shine Button, "Continue where you stopped", finishes the step marked Next up and moves the marker. Under it three ruled bands (Account, Classes, Families) are Collapsibles that list their steps, each a word and a glyph (a tick, a ringed dot, an empty ring) with its minutes; only the band that holds Next up starts open. On a phone the percent, the bar and the button are on the first screen and the bands stack under them. For onboarding flows, setup dashboards and any product with a short, ordered list of first tasks.
FAQ
Where do the percent and the minutes come from?
From the steps. GROUPS lists each band and its tasks, each with the minutes it takes, and START_DONE lists which are done on load. The percent is done over total, the line under the bar adds up the minutes of the tasks not done yet, the counts in the band headers and the Next up marker are all worked out from that one list, so adding a task changes every number with no other edit.
What does Continue where you stopped do?
In the demo it marks the Next up step done, rolls the percent, moves the marker to the next step (opening its band if it was shut) and says what changed in a polite status line under the button. When the last step is done the button reads "Open Chalkhurst" and the line says "Opened in this demo". Focus stays on the button throughout, so repeated presses just work.
How do the bands work, and what is open to start with?
Each band is a Collapsible: its header is a button that says how many of its steps are done and opens or closes the list. Only the band that holds Next up starts open, which on a phone keeps the first screen short; the others are one press away. Closed steps are not on screen, but the counts in the headers still tell the story.
What stays local in the demo, and how do I wire it?
The ticks, the percent and the Opened message live in the page: nothing is saved or sent. In your app, compute done from what the account actually has, make Continue go to the Next up step's own screen, and keep each band's open state if you want it remembered. The numbers on screen then follow your data.