Tutorials
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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 9 min readDeep-Dives
Web components vs React components for product toursCompare web components and React for product tours. Shadow DOM limits, state management gaps, and why framework-specific wins.Apr 8 · 12 min readBuild vs Buy
TCO comparison: 3 years of Appcues vs 3 years of Tour KitWe modeled the full 3-year total cost of ownership for Appcues and Tour Kit at three MAU tiers. See every line item, the compounding effects, and where each tool wins.Apr 9 · 8 min readUse Cases
How to A/B test product tours (complete guide with metrics)Learn how to A/B test product tours with the right metrics. Covers experiment setup, sample size calculation, and feature flag integration for React apps.Apr 9 · 13 min readUse Cases
The aha moment framework: mapping tours to activation eventsMap product tours to activation events using the aha moment framework. Includes real examples from Slack, Notion, and Canva with code patterns for React.Apr 9 · 13 min readUse Cases
Onboarding for AI products: teaching users to promptBuild onboarding flows that teach AI product users to prompt. Covers the 60-second framework, template activation, and guided tour patterns with React code.Apr 9 · 13 min readDeep-Dives
Animation performance in product tours: requestAnimationFrame vs CSSCompare requestAnimationFrame and CSS animations for product tour tooltips. Learn the two-layer architecture that keeps tours at 60fps without jank.Apr 8 · 11 min readDeep-Dives
Building ARIA-compliant tooltip components from scratchBuild an accessible React tooltip with role=tooltip, aria-describedby, WCAG 1.4.13 hover persistence, and Escape dismissal. Includes working TypeScript code.Apr 8 · 12 min readDeep-Dives
How we benchmark React libraries: methodology and toolsLearn the 5-axis framework we use to benchmark React libraries. Covers bundle analysis, runtime profiling, accessibility audits, and statistical rigor.Apr 8 · 13 min readBuild vs Buy
The developer's calculator: DIY tour vs library vs SaaSCalculate the real cost of DIY tours, libraries, and SaaS tools. Compare 3-year TCO with sourced numbers before committing engineering hours.Apr 9 · 10 min readDeep-Dives
Building a plugin system for a product tour libraryDesign a TypeScript plugin system for product tours with event batching, lifecycle hooks, and tree-shaking. Real code from Tour Kit's analytics package.Apr 8 · 15 min read