shadcn.io is not affiliated with official shadcn/ui
Animated Pulse Stepper Block for Radix UI
A four-step sandbox provisioner with dots joined by lines, where the dot you land on rings out three times and rests, and a typed log of three lines for each step.
Installation
Overview
Draw the eye to the step you have just arrived at, with this animated pulse stepper for React with Radix UI. A plus-marked frame holds a line of four Steps dots joined by lines, with Reserve, Build, Seed and Verify under them. When you move to a step its dot sends out a ring three times and then rests inside a still ring; with reduced motion there is only the still ring, and nothing ever loops. The band under the line shows that step's three log lines in mono, and the foot has an outline Back and the block's one Shine Button, "Run next step", which becomes "Hand over the sandbox" on the last. A polite line says "Step 2 of 4: Build" after every move. For provisioning, deployments and any flow where arrival deserves a small signal.
FAQ
How does the pulse stop after three times?
The ring is a span with the animate-ping animation and its iteration count set to 3. It is keyed on the move counter, so it mounts again on every arrival and plays once more, then ends out of sight. It is hidden under reduced motion, and the still ring is a plain ring on the current dot.
Which keys work?
Tab lands on the current dot, the arrow keys move focus along the dots you have reached, Home and End go to the first and last, and Enter or Space opens the focused step. After Next or Back the new step's heading takes focus.
Is the log real?
No. The lines are typed in STAGES and shown as text, so nothing is reserved, built or seeded. To make it real, stream your runner's output into the list for the open step and enable Next when the step reports success.