Product Tour
NEWAn interactive product walkthrough with spring-animated spotlight cutout, auto-scrolling targets, responsive bottom-sheet docking, and keyboard navigation.
Search projects…
Revenue
$48.2k
Active users
2,841
Growth
+24.8%
Recent Activity
● LiveDeployed release v2.4.0 to production · 2 minutes ago
Click "Start tour" to launch the spotlight walkthrough with spring physics and responsive card docking.
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/product-tour
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | TourStep[] | — | List of tour steps with target selector, title, body, and placement preference |
| open | boolean | — | Controls whether the spotlight tour overlay is open |
| onClose | (reason: TourCloseReason) => void | — | Callback triggered when tour completes, is skipped, or is dismissed |
| onStepChange | (index: number) => void | undefined | Optional callback invoked whenever the active step index changes |
| startAt | number | 0 | Zero-based initial step index when the tour opens |
| closeOnOverlayClick | boolean | false | Whether clicking the dim overlay dismisses the tour |