shadcn.io is not affiliated with official shadcn/ui
Onboarding Step Notification Block for React
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 Base 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.
Related
- Pro
Setup Checklist Onboarding
ChecklistsA contract tool's get-started guide as a setup panel: six steps in a single-open accordion with one button in the open step, a count that follows what you finish, a menu that hides completed steps or the guide, and a pill that opens it again.
- Pro
Setup Wizard Onboarding
Profile and accountA team workspace's first-run wizard as a whole screen: a rail of four steps (account, workspace, invites) that ends on a recap of every answer with an Edit button per section, and a Continue that checks each step first.
- Pro
Setup Progress Onboarding
ChecklistsA teachers' app's setup progress as a whole screen: a big rolling percent over a bar, a line of steps done and minutes to go, one button that finishes the next step, and three foldable bands that list every step as Done, Next up or To do.
- Pro
A CRM's first-run checklist: a continuous progress ring and a headline that follows it at the start, four steps in an accordion in the frame (the first picks Sales, Support or Hiring and the rest follow it), and Complete setup, which stays quiet until all four are done.
- Pro
Quick Actions Sandbox Onboarding
ChecklistsA document workspace's first four moves as a sandbox panel: four rows with Try and Undo buttons beside a small drawn workspace that adds a document, a teammate, a connected app and a reminder.
- Pro
A medal shelf for a learning platform after a learner finishes a first project: eight drawn medals in a hairline grid with a New badge on the latest, and a popover on each medal with its criteria, a progress bar and the day it was earned.