shadcn.io is not affiliated with official shadcn/ui
Onboarding Guide Stepper Block for React
A skippable first-ride guide for a bike-share app with four labelled dots, a drawn picture for each step and a Skip guide button that lists the steps you missed and where to find them.
Installation
Overview
Teach a first task in four pictures people can skip, with this onboarding guide stepper for React with Base UI. A narrow hairline panel with plus marks holds a rail of four labelled dots built on Steps (Find a bike, Unlock, Ride and Park), then the open step: a drawn greyscale picture, a title and one sentence. The pictures are composed from three shared shapes, a bike, a dock and a route. "Skip guide" jumps to the end, which says how many steps you skipped, names them and gives the place in the app where each lives; opening a skipped step from the dots takes it off the list. "Continue" is the block's one Shine Button. Nothing unlocks a bike: the end says so. On a phone the picture and the dots keep their sizes. For first-run guides, feature tours and any short introduction that people may have seen before.
FAQ
What does Skip guide do?
It jumps to the final pane and unlocks every dot. The pane lists the steps you never opened, each with the menu path where it lives in the app, and shows "You saw every step" if you finished normally.
How are the pictures made?
They are inline SVG scenes built from three shapes, Bike, Dock and Route, in foreground tones on a street grid. They are decoration, hidden from screen readers, with the words carried by the title and the sentence. In RTL the whole scene mirrors.
How do I change the steps?
Edit STAGES: each has an id, a title, a sentence and a findIt path for the skipped list. Add a scene for a new id in Picture, and a StepsContent is drawn for each stage.
What stays local?
The current step and the list of steps you opened live in component state, and nothing is saved. In an app, store that you finished or skipped the guide so it does not show again.