Examples
Examples
Copy-paste examples for common User Tour Kit patterns: basic tours, onboarding flows, and fully custom headless interfaces
Examples
Copy-paste examples to get started quickly with User Tour Kit. Each example is a complete, working implementation.
Tour Examples
Basic Tour
A simple multi-step product tour with spotlight overlay and navigation controls
Onboarding Flow
Complete user onboarding with persistence, conditional steps, and analytics
Headless Custom
Build completely custom UI using headless components and render props
Quick Comparison
| Example | Complexity | Use Case |
|---|---|---|
| Basic Tour | Simple | Learning the basics, simple product tours |
| Onboarding Flow | Intermediate | User onboarding, remembering progress |
| Headless Custom | Advanced | Custom design systems, unique requirements |
What's Included
Basic Tour
- Complete tour with overlay and card
- Keyboard navigation
- Progress indicators
- Step-by-step breakdown
Onboarding Flow
- localStorage persistence
- "Don't show again" option
- Conditional steps by role
- Analytics integration
- Resume from last step
Headless Custom
- Custom overlay effects
- Design system integration (shadcn, Chakra)
- Framer Motion animations
- Full styling control