shadcn.io is not affiliated with official shadcn/ui
Onboarding Steps Carousel Block for React
Five setup steps on a track that will not move until the step in view is done: a name, a team size, project templates, a calendar switch and a review, with a segmented bar and a Next that says what is missing.
Installation
Overview
Walk someone through setup one decision at a time with this onboarding steps carousel for React with Base UI. Startwell, a team-space tool, asks for five things (a workspace name, a team size, a first project, a calendar and a review), one per slide. The track is the feature: it will not move until the step in view is done. Later slides are out of reach, swiping is off, and Next is marked unavailable while the status line says what is missing ("Add a name to continue."). A segmented bar above the track marks each step as done, current or locked, and the steps you have finished are always one press back. The last step is a review of your answers and the block's one primary, "Finish setup". It is built from Carousel, Input, Label, Switch, Button and Guides, with native radio and checkbox rows for the choices and CSS transitions only. The product and the steps are made up for the example.
FAQ
How is the track locked?
Every slide after the first one that is not done is unreachable: the swipe is off, the buttons stop at it, and the slide is hidden from the tab order and from screen readers until its turn. The bar marks locked steps as unavailable instead of disabled, so they stay in the tab order and explain themselves.
Embla's watchDrag is false, so a drag or swipe does nothing.
What counts as done?
The name needs three to thirty characters, the size needs one choice, the project step needs at least one template ticked, the calendar step needs its switch on, and the review needs its box ticked. Each rule lives in doneOf, so changing one changes the lock, the bar and the status line together.
Can I go back and change an answer?
Yes. Going back is always allowed and keeps every answer. If you undo the task of the step you are on, for example by clearing the name, the steps after it lock again until you finish it.
How does it work with a keyboard?
Tab reaches the bar, the fields on the open step, Back and Next. Focus moves to the new step's title when you press Next or a bar step, so a screen reader hears where it landed. Next stays in the tab order while it is unavailable.