Shadcn.io is not affiliated with official shadcn/ui
Onboarding Tour
An interactive product tour component for React and Next.js with step navigation, highlight simulation, dot progress indicators, and AnimatePresence transitions built with shadcn/ui and Tailwind CSS
Walk new users through your product with this React and Next.js product tour block built in TypeScript. Features four configurable tour steps with title, description, and dashed-border highlight area simulating UI spotlight, dot indicators for visual progress tracking, and Previous, Next, and Skip Tour navigation buttons. Built with React 19, shadcn/ui Button component, Framer Motion AnimatePresence for smooth step transitions, Balancer for balanced heading text, Lucide React icons, and Tailwind CSS utility classes. Perfect for SaaS onboarding flows, feature discovery tours, and interactive product walkthroughs requiring step-by-step guidance.
Related Components
Guided Walkthrough Onboarding
Multi-step guided tour with highlights
Welcome Onboarding
Welcome screen with feature highlights
Quick Actions Onboarding
Quick action shortcuts introduction
Keyboard Shortcuts Onboarding
Keyboard shortcut reference guide
Help Center Onboarding
Help resources and documentation links
Video Intro Onboarding
Video introduction and tutorial
FAQ
Was this page helpful?
Sign in to leave feedback.
Timezone Setup
A timezone configuration onboarding component for React and Next.js with IANA timezone dropdown, auto-detect badge, time preview, and confirm button built with shadcn/ui and Tailwind CSS
Trial Countdown
A free trial information component for React and Next.js with animated countdown number, feature list with dot indicators, usage progress bar, and upgrade CTA built with shadcn/ui and Tailwind CSS