Guided Tour
A comprehensive guided tour component that helps users understand your interface through interactive step-by-step walkthroughs.
Installation
Install the Guided Tour component using your preferred package manager.
Usage
The Guided Tour component provides an interactive way to onboard users and showcase features. It highlights specific elements, provides contextual information, and guides users through complex workflows with smooth transitions and smart positioning.
Discover Its Features
The Guided Tour component is packed with powerful features designed to provide an exceptional user experience.
Interactive Guidance
Highlight specific elements on your interface and provide contextual explanations to guide users through complex workflows.
Smart Positioning
Automatically calculates optimal popover positioning based on viewport space, ensuring tours work perfectly on any screen size.
Completion Tracking
Tracks tour completion status to prevent showing the tour repeatedly to users who have already completed it.
Progress Tracking
Built-in progress indicator shows users how many steps remain, with smooth transitions between tour steps.
Components
The Guided Tour consists of the following components:
TourProvider
The main provider component that manages tour state and provides context to child components.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | ReactNode | undefined | The content to be wrapped by the tour provider |
| autoStart | boolean | false | Whether to automatically start the tour when the component mounts |
| ranOnce | boolean | true | Whether the tour should only run once per user/device |
| storageKey | string | 'rigidui-tour-completed' | Key used to store tour completion status in localStorage |
| shouldStart | boolean | true | Whether the tour should start based on external conditions (e.g., user preferences) |
| onTourComplete | () => void | undefined | Callback function called when the tour is completed |
| onTourSkip | () => void | undefined | Callback function called when the tour is skipped |
TourStep
Wraps any element to make it part of the guided tour sequence with highlighted content and explanatory popovers.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| id* | string | undefined | Unique identifier for the tour step |
| title* | string | undefined | Title displayed in the tour step popover |
| content* | string | undefined | Content/description text for the tour step |
| order* | number | undefined | The order in which this step should appear in the tour sequence |
| position | 'top' | 'bottom' | 'left' | 'right' | 'bottom' | Preferred position for the popover relative to the target element |
| children* | ReactNode | undefined | The element(s) to be highlighted and explained in this tour step |
TourTrigger
A trigger component that starts the guided tour when clicked.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | ReactNode | undefined | The content to be rendered as the tour trigger button |
| className | string | '' | Additional CSS classes for styling the trigger |
| hideAfterComplete | boolean | false | Whether to hide the trigger button after the tour is completed |