shadcn.io is not affiliated with official shadcn/ui
Onboarding Step Notification Block for Radix UI
One step of a five-step setup as a card: a strip of read-only Steps dots, what the step is for, Complete step as the one primary and Skip, a quiet preview of the next step, and a done card that lists the skipped steps so each can be done later.
Installation
Overview
Walk someone through setup one step at a time, with this onboarding step notification for React with Radix UI. It is Stepnook, a design tool, at "Step 2 of 5: Invite your team", in a narrow card with a strip of five read-only Steps dots on top, the step's name, what it is for and two things you will do, then a quieter dashed preview of the next step. Complete step, the one Shine Button, marks the step done and moves on; Skip marks it skipped, shown as a dashed dot with a minus instead of a tick, and moves on too. After the fifth a done card counts what was done and what was skipped and lists the skipped steps, each with Do it now, which brings that one step back on its own. Start over resets it. Guides draw the lines. For product tours, first-run setup and any short flow you want people to be able to leave and come back to.
FAQ
How do I change the steps?
Edit STEPS: each has an id, a title, the sentence in what and two bullets. START says what is done and which step is open on load. The strip, the "Step 2 of 5" line, the counts in "1 done, 0 skipped", the preview and the done card are all worked out from the list of statuses, so adding a sixth step needs nothing else. Keep the sentences about the same length: every step is given the same height, so the card never jumps.
What does Skip do, and how is it different from Complete step?
Both move to the next step; they record different things. Complete step marks the step done, with a tick; Skip marks it skipped, with a dashed ring and a minus in the strip and the word "Skipped" for screen readers. At the end the done card lists every skipped step with a Do it now button. That one step opens on its own with Complete step and Not now; Not now leaves it skipped and goes back to the done card.
What stays local in the demo, and how do I wire it?
Everything. Completing a step creates nothing, sends no invitation and uploads no file: it only changes the card. In your app make Complete step run the step's real action (or open the dialog that does it), take the statuses from what your server knows about the account, and keep the skipped ones so Do it now can find them later.
What is the preview under the step?
A quiet dashed box that names the next step and its sentence, so people know what is coming before they press anything. When you move on, that step becomes the current one and the box shows the step after it; on the last step it says the workspace is ready after it.
Does the card move between steps?
No. Every step, and the done card, are stacked in one cell and only the current one is visible and reachable, so the card keeps the height of the tallest. The buttons below swap places in one cell too. After the last step focus moves to the done card's heading; after Do it now it goes to Complete step.