Shadcn Tour

Create Interactive Product Tours with shadcn/tour

shadcn/tour is a React component library for developers to build engaging product tours. It integrates seamlessly with shadcn/ui and uses motion to guide users through application features. This tool simplifies highlighting UI elements, making onboarding and feature discovery intuitive, thereby enhancing user adoption and engagement with your application. It provides a structured way to introduce users to new functionalities or complex workflows.

Features:

• TourProvider: A context provider component that makes tour state and functions available throughout your application.
• TourAlertDialog: A pre-built dialog component prompting users to start or skip the product tour.
• useTour Hook: Provides access to tour controls (startTour, nextStep, previousStep, endTour) and state (currentStep, totalSteps, isActive, steps, isTourCompleted, setIsTourCompleted, setSteps).
• Step Configuration: Define tour steps with custom content (React components), target selector IDs, display positions (e.g., 'right', 'left', 'bottom'), and onClickWithinArea handlers.
• Dynamic Element Highlighting: Automatically highlights the UI element associated with the current tour step based on its selector ID.
• Viewport-Aware Positioning: Intelligently positions tour steps relative to highlighted elements, calculating its position within the viewport.
• Tour State Management: Manages the current step index, total number of steps, and whether the tour is currently active.
• Completion Tracking: Allows setting and retrieving the tour's completion status, with an optional onComplete callback function executed when the tour is completed.
• Customizable Styling: Supports adding custom CSS classes (via className prop on TourProvider) to the tour's highlight border for visual customization.
• CLI Installation: Simplified setup via a pnpx shadcn add command, which adds TourProvider, TourAlertDialog, and useTour hook into your project.
• Step ID Constants: Automatically adds a set of step IDs (e.g., TOUR STEPS) under lib/tour-constants.ts for easy reference in your components.

Summary:

shadcn/tour equips React developers with the necessary tools—TourProvider, TourAlertDialog, and the useTour hook—to construct interactive, step-by-step product walkthroughs. It leverages shadcn/ui for styling and motion for smooth transitions, simplifying user onboarding and feature introduction. The library facilitates easy configuration of tour steps, element highlighting, and state management for a polished user guidance experience.