shadcn.io is not affiliated with official shadcn/ui
Migration Steps Carousel Block for React Aria
Six database migration steps on a track that follows the live step: a sentence, a dark SQL preview, a duration and a risk word per step, one primary that runs the live step, and a way back to it.
Installation
Overview
Show a long operation one step at a time with this migration steps carousel for React with React Aria. Movehouse, a database migration helper, splits a move of the orders table into six steps (back up, create tables, copy rows, verify counts, switch traffic and clean up), one per slide. Each slide holds a sentence, a short SQL preview in a dark pane, a duration and a risk word drawn with a weight. The one primary, "Run step 3", marks the live step done and the track slides to the next one. Browse away by hand and "Back to the live step" appears; past steps read "Done". A numbered rail above the track jumps to any step. It is built from Carousel, Button, Badge and Guides, with CSS transitions only. The product, the SQL and the numbers are made up for the example, and nothing runs.
FAQ
What does the track follow?
The live step: the first one that has not run. Running a step moves the live step on and the track goes with it. If you browse to another step, the track stays where you put it and a button returns you. The button is always in the layout and only becomes visible and reachable when you are away, so nothing shifts.
Why is the SQL pane dark in a light theme?
A code preview reads as a terminal, so the pane keeps its dark colours in any theme. Everything else follows your theme.
How is risk shown?
As a word and a weight: three dots for High, two for Medium and one for Low. The dots are decoration; the word carries the meaning.
How does it work with a keyboard?
Tab reaches the rail, Previous, Next, "Back to the live step" when it shows, and Run. Slides that are not in view are hidden from the tab order and screen readers. The status line is the one live region and says what ran.