shadcn.io is not affiliated with official shadcn/ui
Compact Card Stepper Block for React
A 20 rem getting-started card with four dots, two icon buttons and a Skip link, set beside a drawn dashboard that marks where the card sits.
Installation
Overview
Show a setup coach at the size it really has in a product, with this compact card stepper for React with Base UI. A hairline frame with plus marks holds a 20 rem cell built on Steps: a "Getting started" heading with a live "Setup 2 of 4" count, four dots joined by a line (Goal, Room, Timer and Done), the open step's one line, a Skip link and two icon buttons. Next is the block's one Shine Button; Back is outline. The Room step has two Toggle chips for the spots to clear, and the Timer step adds up the minutes from them (15 for each spot). Beside the card a greyscale drawing of a dashboard outlines the cell the card takes, so the size makes sense in context. The last step ends on "Done in this demo". On a phone the card stands alone at full width. For onboarding cards, getting-started panels and setup coaches that live in a side column.
FAQ
How do I change the steps or the minutes?
Edit STAGES, SPOTS and SESSION at the top of the file. The dots, the panels and the Timer step's total are drawn from them, so adding a spot adds a chip and changes the sum without touching the markup. A new step also needs its own StepsContent with the same index.
How does the keyboard work?
The dots are one tab stop on the current step. Left and Right arrows move between the dots you have reached, Home and End jump to the ends, and Tab then continues to Skip, Back and Next. Each dot is named by its step ("Room"), and the heading of a new step takes focus after you move.
What does Skip do?
It jumps to the last step, Done, and unlocks every dot so you can still go back. It is hidden from view on the last step but keeps its place, so nothing shifts.
What stays local?
The step and the chosen spots live in component state and are lost on reload; no timer starts and no reminder is set. To make it real, save the chosen spots and the step from the Next handler to your user settings and start the timer from the Done step.