Tutorials
Amplitude + Tour Kit: measuring onboarding impact on retentionWire Tour Kit callbacks to Amplitude track() for onboarding funnels, behavioral cohorts, and retention analysis. TypeScript examples included.Apr 7, 2026 · 9 min readTutorials
How to add a product tour to an Astro site with React islandsAdd interactive product tours to an Astro site using React islands. Covers client directives, Nanostores state sharing, and Tour Kit setup.Apr 7, 2026 · 9 min readTutorials
Building conditional product tours based on user roleBuild role-based product tours in React with Tour Kit. Filter steps by admin, editor, or viewer roles using the when prop and React Context.Apr 7, 2026 · 9 min readTutorials
Using CSS container queries for responsive product toursBuild product tour tooltips that adapt to their container, not the viewport. Learn CSS container queries with Tour Kit for truly responsive onboarding.Apr 7, 2026 · 9 min readTutorials
Testing product tours with Cypress: a complete guideWrite reliable Cypress tests for product tour flows. Custom commands, tooltip assertions, accessibility checks, and multi-step navigation with Tour Kit.Apr 7, 2026 · 11 min readTutorials
Theming product tours for dark mode in ReactBuild dark-mode-aware product tours in React with CSS variables, adaptive overlays, and WCAG-compliant contrast. Includes working TypeScript examples.Apr 7, 2026 · 10 min readTutorials
E2E testing product tours with PlaywrightWrite reliable Playwright tests for product tours covering tooltip visibility, step navigation, keyboard access, and ARIA attributes.Apr 7, 2026 · 12 min readTutorials
Product tours in Electron apps: desktop onboarding guideBuild a product tour for Electron desktop apps using React and Tour Kit. Covers renderer process setup, multi-window coordination, and offline persistence.Apr 7, 2026 · 10 min readTutorials
How to create a feature announcement banner in ReactBuild a dismissible feature announcement banner in React with frequency control, analytics callbacks, and WCAG-compliant ARIA. TypeScript examples included.Apr 7, 2026 · 9 min readTutorials
Google Analytics 4 + Tour Kit: event tracking for onboardingWire Tour Kit's analytics plugin to GA4 custom events for tour funnels, step drop-off, and onboarding completion tracking. TypeScript examples.Apr 7, 2026 · 10 min readTutorials
Building keyboard-navigable product tours in ReactBuild keyboard-navigable React product tours with focus trapping, arrow keys, and screen reader announcements. WCAG 2.1 AA TypeScript tutorial.Apr 7, 2026 · 9 min readTutorials
Managing tour state with Zustand: a practical guideBuild product tour state management with Zustand in React. Step navigation, persistence, multi-tour coordination, and accessibility-driven state patterns.Apr 7, 2026 · 8 min readTutorials
How to export Pendo tours to a self-owned React solutionReplace Pendo guides with a code-owned React tour library. Step-by-step migration with API mapping, working TypeScript code, and cost analysis.Apr 7, 2026 · 14 min readTutorials
How to migrate from React Joyride to Tour Kit (step-by-step)Replace React Joyride with Tour Kit in under 2 hours. Step-by-step migration with API mapping, working code, and side-by-side testing.Apr 7, 2026 · 10 min readTutorials
Migrating from Shepherd.js to Tour Kit: AGPL to MITMigrate from Shepherd.js to Tour Kit step by step. Replace AGPL licensing with MIT, get native React hooks, and cut your tour bundle to under 8KB gzipped.Apr 7, 2026 · 10 min readTutorials
Migrating from Userpilot to Tour Kit + PostHogReplace Userpilot with Tour Kit and PostHog for product tours and analytics. Step-by-step migration with API mapping, code examples, and cost breakdown.Apr 7, 2026 · 10 min readTutorials
Funnel analysis for product tours with MixpanelTrack product tour completion rates with Mixpanel funnels. Set up event tracking, build conversion funnels, and measure onboarding drop-off in React.Apr 7, 2026 · 9 min readTutorials
Track tour metrics with Plausible Analytics (privacy-first)Send product tour events to Plausible Analytics without cookies or consent banners. TypeScript setup, custom event mapping, and funnel reconstruction.Apr 7, 2026 · 9 min readTutorials
Build a product tour with Framer Motion animationsAdd smooth entry, exit, and step transitions to your React product tour with Motion. Includes LazyMotion setup and reduced-motion support.Apr 7, 2026 · 8 min readTutorials
How to create an empty state with guided action in ReactBuild an accessible React empty state component with guided actions. TypeScript patterns, ARIA attributes, and Tour Kit integration included.Apr 7, 2026 · 9 min readTutorials
How to add hotspots to your React appBuild accessible React hotspot components with pulsing beacons, tooltip positioning, and dismissal tracking. Step-by-step TypeScript tutorial with Tour Kit.Apr 7, 2026 · 9 min readTutorials
How to build an onboarding wizard in React with stepper UIBuild an accessible React onboarding wizard with stepper UI using Tour Kit. Step-by-step TypeScript tutorial with focus management, ARIA roles, and analytics.Apr 7, 2026 · 8 min readTutorials
How to build a resource center component in ReactBuild an accessible in-app resource center in React with headless components. TypeScript tutorial with compound API, ARIA roles, and tour integration.Apr 7, 2026 · 9 min readTutorials
How to create a spotlight highlight effect in ReactBuild an accessible spotlight overlay component in React using CSS clip-path. Covers portal rendering, focus trapping, and prefers-reduced-motion.Apr 7, 2026 · 8 min readTutorials
Reduced motion support in product tour animationsAdd prefers-reduced-motion to React product tours. Build an SSR-safe hook, swap animations for opacity fades, and test with Playwright.Apr 7, 2026 · 10 min readTutorials
Redux Toolkit + Tour Kit: enterprise state management for toursBuild enterprise product tours with Redux Toolkit and Tour Kit. Typed tour slices, time-travel debugging, and multi-tour state for large React apps.Apr 7, 2026 · 9 min readTutorials
Product tours in Remix: setup, routing, and best practicesBuild a product tour in Remix with userTourKit. Covers loaders, nested routes, focus management, and tour state persistence across navigations.Apr 7, 2026 · 9 min readTutorials
How to replace Intro.js with a modern React tour libraryMigrate from Intro.js to Tour Kit in a React project. Covers step definitions, tooltip rendering, callbacks, accessibility fixes, and AGPL license removal.Apr 7, 2026 · 9 min readTutorials
Screen reader support in product tours: the developer's guideBuild screen reader accessible product tours in React with ARIA live regions, focus traps, and cross-SR testing. Covers NVDA, JAWS, and VoiceOver patterns.Apr 7, 2026 · 14 min readTutorials
Building product tours with shadcn/ui components from scratchBuild an accessible product tour using shadcn/ui Card, Button, and Popover with Tour Kit. Step-by-step TypeScript tutorial with copy-paste components.Apr 7, 2026 · 11 min readTutorials
Tailwind CSS product tour styling: a design tokens approachBuild a token-driven product tour with Tailwind v4 and Tour Kit. Define overlay, tooltip, and beacon tokens once, then theme every step consistently.Apr 7, 2026 · 8 min readTutorials
Tour Kit + Jotai: atomic state for complex tour flowsBuild complex product tour flows with Jotai atoms and Tour Kit. TypeScript tutorial covering derived atoms, persistence, and conditional steps.Apr 7, 2026 · 9 min readTutorials
Tour Kit in a Turborepo monorepo: shared tours across appsSet up Tour Kit as a shared package in Turborepo with pnpm workspaces. Define tours once, consume from multiple apps, keep bundles small.Apr 7, 2026 · 11 min readTutorials
How to save product tour progress with localStorage in ReactPersist product tour state across page refreshes using Tour Kit's built-in localStorage adapter. Resume tours, track completions, and handle SSR safely.Apr 7, 2026 · 9 min readTutorials
Track product tour completion with PostHog eventsWire Tour Kit's React callbacks to PostHog capture() for tour completion funnels, step drop-off analysis, and activation cohorts. TypeScript examples included.Apr 7, 2026 · 8 min readTutorials
Unit testing Tour Kit components with VitestTest product tour components with Vitest and React Testing Library. Set up providers, test hooks, verify accessibility, and catch regressions.Apr 7, 2026 · 9 min readTutorials
Visual regression testing for product tours with ChromaticSet up visual regression tests for React product tour components using Storybook and Chromatic. Catch tooltip drift and overlay bugs before they ship.Apr 7, 2026 · 12 min readTutorials
How to add product tours to a Vite + React + Tailwind stackAdd an accessible product tour to your Vite + React + Tailwind project with Tour Kit. Step-by-step TypeScript setup with Tailwind-styled tooltips.Apr 7, 2026 · 9 min readTutorials
How to build a 'What's New' changelog modal in ReactBuild a What's New changelog modal in React with localStorage persistence, seen/unseen tracking, and WCAG-compliant focus trapping. TypeScript examples.Apr 7, 2026 · 9 min readTutorials
Migrating from Appcues to code-owned onboarding (complete guide)Replace Appcues with code-owned React onboarding using Tour Kit. Step-by-step migration with API mapping, side-by-side testing, and honest tradeoffs.Apr 7, 2026 · 10 min read