← All articles

Tutorial

Hands-on tutorials with copy-pasteable code: building your first product tour in React, adding a tour to a Next.js App Router app, integrating with shadcn/ui, persisting tour state, customizing the spotlight, and shipping accessible tours that pass a Lighthouse audit. Each tutorial is end-to-end — start with `pnpm add` and finish with a running demo.

5 articles

Build an accessible product tour in React: a step-by-step tutorial

Build an accessible product tour in React: a step-by-step tutorialBuild a WCAG 2.1 AA accessible product tour in React step by step. Focus trapping, keyboard navigation, screen reader support, and prefers-reduced-motion in under 30 minutes.Apr 18 · 5 min read Tutorial

Build a complete Next.js 15 onboarding flow: tour + checklist + analytics

Build a complete Next.js 15 onboarding flow: tour + checklist + analyticsStep-by-step Next.js 15 onboarding tutorial. Combine a product tour, activation checklist, and analytics plugin with userTourKit in under 45 minutes.Apr 18 · 4 min read Tutorial

How to Add a Product Tour to a React 19 App in 5 Minutes

How to Add a Product Tour to a React 19 App in 5 MinutesAdd a working product tour to your React 19 app with userTourKit. Covers useTransition async steps, ref-as-prop targeting, and full TypeScript examples.Apr 2 · 9 min read Tutorial

How to Add a Product Tour to a Next.js App Router Project

How to Add a Product Tour to a Next.js App Router ProjectStep-by-step guide to integrating userTourKit into a Next.js 15 App Router project. Covers Server Components, client boundaries, multi-page routing, and TypeScript setup.Apr 3 · 5 min read Tutorial

Migrating from Driver.js to Tour Kit: Adding Headless Power

Migrating from Driver.js to Tour Kit: Adding Headless PowerStep-by-step guide to replacing Driver.js with userTourKit in a React project. Covers step definitions, popover rendering, highlight migration, callbacks, and multi-page tours.Apr 7 · 9 min read