Tour Kit Docs — React Onboarding Library

userTourKit is an open-source headless React library for building product tours, onboarding checklists, hints, announcements, and in-app messaging. It ships three packages — a framework-agnostic core under 8KB gzipped, a React component layer under 12KB, and a hints/hotspot layer under 5KB — all under the MIT license. WCAG 2.1 AA accessibility, TypeScript-strict types, and Lighthouse 100 scores come built in. The optional Pro tier adds adoption tracking, analytics, announcements, checklists, media, scheduling, and AI chat as a one-time purchase.

These docs are written for React developers integrating onboarding into a Next.js, Remix, or plain-CRA app, especially teams already on shadcn/ui, Radix, or Base UI. If you're evaluating whether tours are the right pattern at all — versus checklists, in-app messaging, or empty-state guidance — start with the complete React product tour guide and the user onboarding handbook. Otherwise, jump straight to installation below.

Why userTourKit?

Packages

Quick Start

pnpm add @tour-kit/react

import { Tour, TourStep, useTour } from '@tour-kit/react';

function App() {
  const { start } = useTour('onboarding');

  return (
    <Tour id="onboarding">
      <TourStep
        target="#welcome"
        title="Welcome!"
        content="Let's take a quick tour."
        placement="bottom"
      />
      <button onClick={() => start()}>Start Tour</button>
      <div id="welcome">Welcome Section</div>
    </Tour>
  );
}

Next Steps

Migrating from another tour library?

Drop-in codemods to rewrite an existing codebase to Tour Kit in one command:

• Migrate from react-joyride — <Joyride> JSX + useJoyride() hook.
• Migrate from shepherd.js — new Shepherd.Tour({...}).addStep(...).start().
• Migrate from driver.js — driver({...}).drive() config calls.

Going further

• Guides — accessibility, persistence, router integration, i18n, segmentation, animations, theme variations, and more.
• Use cases — full onboarding patterns assembled from the primitives above.
• Build with LLMs — drop the per-package context files into ChatGPT, Claude, or Cursor for accurate code generation.