shadcn.io is not affiliated with official shadcn/ui
Progress Sidebar Block for Ark UI
An onboarding checklist in a fixed-height window: nine steps in two groups, each row showing Done, a thin bar with its percent or Not started, with Mark step done in the top bar advancing the open step.
Installation
Overview
Show how far someone has come with this progress sidebar for React with Ark UI. A window framed by a hairline with a plus mark on each corner holds a Sidebar that is an onboarding checklist for a developer platform: nine steps in two groups, Set up and Go live, and each group's label counts how many are done. Every row says where its step stands: a check and Done, a thin Progress bar with the percent, or Not started. The page is the chosen step with what it covers and its tasks, and Mark step done in the top bar finishes the open step and opens the next one that is still open; when every step is done the same button reads Start over. The bars are foreground-toned and the row's full status is in its accessible name. Folded to icons the rail keeps each step's icon with a tooltip, and on a phone it is a sheet. It's built from Sidebar, Progress, Shine Button, Avatar and Guides, with a CSS entrance only. For onboarding, setup guides, course outlines and any list whose rows are at different stages.
FAQ
What does each row show?
Done, partial or not started, worked out from the step's tasks. A step with all its tasks done shows a check and Done; one with some shows a thin bar and its percent; one with none shows Not started. The bar's slot is always there, so a row keeps its height when its step changes state. The bar itself is hidden from assistive technology, because the row's accessible name already says, for example, "Connect a repository, 60% done".
What does Mark step done do?
It sets every task of the open step to done, updates the step's row and its group's count, and opens the next step that is still open, wrapping round to the start if the later ones are finished. If the open step was already done it just moves on and says so in the status line. When all nine are done the button becomes Start over, which returns the checklist to how it loaded.
Why are the bars not the primary colour?
The bars use the foreground token, so the rail stays quiet in any theme and the one primary on the page is the button in the top bar. Only the partial rows draw a bar; a done row has a check instead, so the list reads as a set of finished, current and waiting steps without a column of full bars.
How are the steps wired?
The steps are links to # whose handler shows the page instead of navigating. They are SidebarMenuButtons with asChild around an a element. Point them at your routes and mark the current one with isActive and aria-current.
What stays in the page, and how do I connect it?
Everything. The steps, their tasks and the starting counts are typed in GROUPS, and progress lives only in the block's state. The block sets persist={false} and shortcut={false}, so it writes no cookie and leaves Ctrl and Command with B to the page it sits on. To track a real onboarding, load each step's task count from your account and keep the counts where your app stores them; the percent, the group counts and the labels are worked out from those numbers.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. The progress bars are inside it, so you see a step move as you finish it. Choosing a page closes the sheet and puts focus back on the button, and the status line under the page says what changed.