shadcn.io is not affiliated with official shadcn/ui
Migration Wizard Onboarding Block for Radix UI
A migration queue of four tools to move work out of, each with a state in words and one action, where Import all runs them in order with a visible Pause and a combined progress bar.
Installation
Overview
Let a new team move their work over from the tools they use now, with this migration step for React with Radix UI. It is a whole screen of Carrymoor, a work-management platform: the page's rails and one band across it, with four rows for Asana, Trello, Jira and Notion (a two-letter tile and the name in text). Each row says where it is in words (Not connected, Waiting in line, Connecting, Importing 60%, Paused at 40%, Done: 128 tasks) and offers one action: Connect, Pause, Resume or View. Import all is the one Shine Button; the sources run in order, and a combined Progress and the line under it add up what finished ("Imported 128 tasks from 2 of 4 sources"). When all four are done the button reads Continue.
FAQ
In what order do the sources run?
In the order of the list, one at a time. A source that is queued waits one step, connects for one step, then imports in four steps of 25%, each step 600 ms. Pressing Connect on the last row while the first is running just puts it in line.
Can I stop it?
Yes: every row that is waiting, connecting or importing shows Pause, and Resume continues from where it stopped (a row paused before it started goes back in line). The timer runs only while some source is moving, it stops when the queue is empty and when the page goes, and nothing loops.
What happens with reduced motion?
The queue does not animate: pressing Connect, Resume or Import all marks the sources Done at once, and the combined bar jumps to its end. The words and counts are the same.
Where do the task counts come from?
They are typed in the file (tasks on each source) and labelled as example numbers in the status line. The summary adds up the finished sources, so it always matches the rows. View says opening the tasks is not wired in the demo.