The onboarding libraryyou wish you'd built.

WCAG 2.1 AA accessibleBuilt for shadcn/ui

The onboarding library

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/core · < 8KB gzipped · TypeScript strict · own your code

Launch sale — 49% off Pro\--Days\--Hrs\--Min\--Sec

Theme

your-app.com

Welcome to your dashboard

This is where you'll manage your projects.

1 / 3Next

`$ pnpm add @tour-kit/core`

Ship your first tour in 2 minutes

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

1

InstallOne package, zero config.

2

Wrap your appAdd the provider at your layout root.

3

Define your stepsDeclarative steps with target selectors.

4

Start the tourOne hook, one function call.

terminal

1

pnpm add @tour-kit/react

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

Built for developers

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

1

2

3

4

5

6

7

8

9

10

11

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

1

2

3

4

5

6

7

8

9

10

11

<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

1

2

3

4

5

6

7

8

9

// 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

1

2

3

4

5

6

7

8

9

10

11

12

13

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

Free & open source

Ready to build your first tour?

MIT core, free forever. Pro packages run unlicensed in dev — pay once ($99) when you ship.

Build my first tourSee pricing

Free & MIT-licensed — no signup, no credit card.

One install.

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/core`Docs →

@tour-kit/react

< 12 KB

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

Tour componentTourStepRouter adaptersHeadless variants

`$ pnpm add @tour-kit/react`Product tours →

@tour-kit/hints

< 5 KB

Persistent contextual hints and pulsing beacons.

Pulsing beaconsContextual tipsDismissal tracking

`$ pnpm add @tour-kit/hints`Feature hints →

Extensions

@tour-kit/announcements

Modals, toasts, banners, slideouts

→

@tour-kit/checklists

Onboarding tasks with dependencies

→

@tour-kit/surveys

NPS, CSAT & CES microsurveys

→

@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

TutorialHow 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.9 min read·Read →ComparisonuserTourKit 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 →TutorialsBuilding 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.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/core

Get started