Skip to main content
WCAG 2.1 AA accessibleBuilt for shadcn/ui

The onboarding library
you wish you'd built.

The open-source onboarding toolkit for React. Headless hooks, composable components, and WCAG 2.1 AA accessibility — all in under 8KB. Works with shadcn/ui out of the box.

Get startedView on GitHub

pnpm add @tour-kit/react · < 8KB gzipped · TypeScript strict · own your code

your-app.com

Welcome to your dashboard

This is where you'll manage your projects.

1 / 3
$ pnpm add @tour-kit/react

Ship your first tour in 2 minutes

Install, wrap, define, start. Four steps to a production-ready onboarding flow.

terminal
pnpm add @tour-kit/react

That's it. userTourKit handles positioning, focus trapping, keyboard navigation, and screen reader announcements automatically.

Built for developers
who ship.

Headless architecture, strict TypeScript, and WCAG accessibility — not afterthoughts, but foundations.

useTour

Headless first

All logic lives in hooks — your design system, your components. Need to ship fast? Use the pre-styled components and customize later.

example.tsx
const tour = useTour('onboarding', {
  steps: [
    { target: '#sidebar', title: 'Nav' },
    { target: '#search', title: 'Search' },
  ],
});

// Full control over rendering
return <div style={tour.tooltipProps.style}>
  {tour.currentStep.title}
</div>;
<Tour />

Accessible by default

WCAG 2.1 AA from day one — not bolted on after an audit. Focus traps, keyboard nav, and screen reader announcements are handled so you never retrofit accessibility.

example.tsx
<Tour id="onboarding">
  {/* Focus trap auto-managed */}
  {/* Arrow keys navigate steps */}
  {/* Escape dismisses tour */}
  {/* Screen readers announce steps */}
  <TourStep
    target="#welcome"
    aria-label="Welcome step"
    role="dialog"
  />
</Tour>
import

Tree-shakeable & tiny

Core is under 8KB gzipped — 6x smaller than react-joyride. Import one hook or the full library. You only ship what you use.

example.tsx
// Only imports what you use
import { useTour } from '@tour-kit/core';
// → 3.2 KB

import { Tour, TourStep } from '@tour-kit/react';
// → 7.4 KB

// vs. react-joyride → 47.2 KB
// vs. shepherd.js  → 35.1 KB
type-safe

TypeScript native

Strict mode from the first commit. Full type inference for configs, hooks, and props — no @types packages, no any casts, no surprises.

example.tsx
// Full type inference
const tour = useTour<MyStepData>('setup', {
  steps: [
    {
      target: '#nav',
      title: 'Navigation',
      data: { category: 'core' }, // ← typed
    },
  ],
  onComplete: (ctx) => {
    ctx.steps // ← TourStep<MyStepData>[]
  },
});

One install.
Nine packages.

Start with the free core. Add analytics, checklists, or scheduling when you need them — each package is independently tree-shakeable.

@tour-kit/core

< 8 KB

The headless engine. Hooks, positioning, focus management, and state — all framework-agnostic.

useTour hookPosition engineFocus trapKeyboard navStorage adapters
$ pnpm add @tour-kit/coreDocs →

@tour-kit/react

< 12 KB

Pre-styled, composable React components. Drop in and go.

Tour componentTourStepRouter adaptersHeadless variants
$ pnpm add @tour-kit/reactDocs →

@tour-kit/hints

< 5 KB

Persistent contextual hints and pulsing beacons.

Pulsing beaconsContextual tipsDismissal tracking
$ pnpm add @tour-kit/hintsDocs →
Extensions

@tour-kit/announcements

Modals, toasts, banners, slideouts

→

@tour-kit/checklists

Onboarding tasks with dependencies

→

@tour-kit/analytics

PostHog, Mixpanel, Amplitude, GA4

→

@tour-kit/adoption

Usage tracking & nudge scheduler

→

@tour-kit/media

YouTube, Vimeo, Loom, Lottie, GIF

→

@tour-kit/scheduling

Time-based scheduling & timezones

→

From the blog.

Technical deep-dives, honest comparisons, and shipping tutorials. No listicles, no affiliate content — written for the engineers who will read the code.

All articles
Tutorial

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

Add a working product tour to your React 19 app with userTourKit. Covers useTransition async steps, ref-as-prop targeting, and full TypeScript examples.

9 min read·Read →Comparison

userTourKit vs React Joyride: Headless Tours for React (2026)

We compare userTourKit and React Joyride on bundle size, TypeScript, React 19 support, accessibility, and pricing. Data-backed verdict inside.

7 min read·Read →Tutorials

Building product tours with shadcn/ui components from scratch

Build an accessible product tour using shadcn/ui Card, Button, and Popover with Tour Kit. Step-by-step TypeScript tutorial with copy-paste components.

11 min read·Read →

Own your onboarding. Ship it today.

No vendor lock-in. No monthly invoice. Just code you control and users who convert.

$pnpm add @tour-kit/react
Get started