Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: React Onboarding Goal Setting
Next: React Onboarding Integrations

React Onboarding Guided Walkthrough

Guided walkthrough with step-by-step instructions, visual highlights, and progress navigation

Guide users with this walkthrough component. Features numbered instruction steps, visual element highlights, progress dots, and navigation controls. Built with shadcn/ui Card, Button, and Badge. Perfect for feature introductions, interactive tutorials, or guided app experiences.

React Onboarding Guided Walkthrough preview

Loading...
Scroll to load preview

Installation

Install
Pro block

React Onboarding Stepper

Linear stepper

React Onboarding Progress

Progress bar style

React Onboarding Carousel

Feature carousel

React Onboarding Tour

Feature tour

React Onboarding Completion

Completion celebration

React Onboarding Shortcuts

Keyboard shortcuts

FAQ

Was this page helpful?

Sign in to leave feedback.

React Onboarding Goal Setting

Goal setting with objective input, priority selector, and goal list management for productivity flows

React Onboarding Integrations

Integration connection with app icons, connection status badges, and OAuth connect buttons