Guides
In-depth guides for accessibility, persistence, animations, router integration, and framework-specific User Tour Kit setup
Guides
In-depth guides for setting up and customizing User Tour Kit in your applications.
Framework Integration
Next.js
Complete setup for Next.js App Router and Pages Router with multi-page tours
Vite
Setup guide for Vite and React with React Router integration
Features
Accessibility
WCAG 2.1 AA compliance, keyboard navigation, screen readers, and reduced motion
Persistence
Save tour progress, checklist state, and user preferences across sessions
Animations
Customize transitions, respect reduced motion, and integrate with animation libraries
Router Integration
Deep dive into multi-page tours with router adapters
Base UI
Using User Tour Kit with Base UI instead of Radix UI
Troubleshooting
Common issues and solutions
Package Integration
Analytics Integration
Set up analytics tracking across all User Tour Kit packages
Adoption Analytics
Track feature adoption metrics and user behavior
Announcements + Scheduling
Time-based announcements with scheduling rules
Checklists + Tours
Combine onboarding checklists with guided tours
Quick Links
| Guide | Description |
|---|---|
| Next.js | App Router, Pages Router, SSR |
| Vite | SPA setup with React Router |
| Accessibility | WCAG compliance, keyboard nav, screen readers |
| Persistence | Storage, cross-session state, custom adapters |
| Animations | CSS variables, Tailwind, reduced motion, Framer Motion |
| Router Integration | Multi-page tour implementation |
| Base UI | Alternative UI library support |
| Analytics Integration | Analytics setup and tracking |
| Troubleshooting | Common issues and fixes |