shadcn.io is not affiliated with official shadcn/ui
Percentage Display Stepper Block for React Aria
A migration with a rolling percent over a full-width bar and five read-only steps with row counts, where one button runs the next batch of rows and opens the next step.
Installation
Overview
Show real progress as it runs, with this percentage display stepper for React with React Aria. A framed panel opens on a large rolling percent over a full-width Progress bar, then a rail of five read-only Steps, Import, Map, Validate, Migrate and Verify, each with its row count ("11,640 of 12,000 rows") and a word for its state. The block's one Shine Button, "Run next batch (4,000 rows)", moves the open step on by one batch and, when its rows are all done, opens the next. The percent is every step's rows over all the rows, worked out from the counts, and a polite line names the open step and its rows. On a phone the steps become a vertical list. For imports, migrations and any work that goes through in batches.
FAQ
Where does the percent come from?
It is worked out: the rows processed across the five steps over the rows in all of them, rounded down so 100 means every row. Change a step's total or batch in STAGES and the percent, the labels and the button follow.
Is anything really migrated?
No. The counts are typed and a batch only adds to a number in state. The block says "Simulated in this demo: nothing is migrated." To make it real, call your job runner from the button and update the row counts from its progress.
Why are the steps not clickable?
The work goes in order and each step is driven by its batches, so the rail only shows. It is a read-only list: the open step carries aria-current, and its state is also a word (Done, Running or Waiting).