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

The onboarding library
you wish you'd built.

The onboarding toolkit for React, Vue and Svelte. A headless core, composable components, and WCAG 2.1 AA accessibility. Works with shadcn/ui out of the box.

Get startedView on GitHub

Work with

  • React
  • Next.js
  • Vue.js
  • Svelte
Free in development, from $9.99 one-time when you ship
Theme
your-app.com

Welcome to your dashboard

This is where you'll manage your projects.

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

Ship your first tour in 2 minutes

Install, wrap, define, start. The same four steps in React, Vue and Svelte, only the adapter package changes.

+ more soon
$ pnpm add @tour-kit/react

+ @tour-kit/core   the engine, identical in every framework
+ @tour-kit/react   the adapter, the only line that changes

Done.
$

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

Import one hook and you ship under 4 KB of core, the rest tree-shakes away. A monolithic tour component ships its whole surface whether you use it or not.

example.tsx
// Only imports what you use
import { useTour } from '@tour-kit/core';
// → 3.9 KB brotli, enforced by a CI budget

// A monolithic tour component ships its entire
// surface whether you use one piece of it or all.

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>[]
  },
});
Free in development

Ready to build your first tour?

Source-available under BSL 1.1, free for development, evaluation and CI. One-time from $9.99 when you ship to production.

Build my first tourSee pricing

Free in development, no signup, no credit card.

One install.
Ten packages.

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

@tour-kit/core

under 4 KB tree-shaken

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/reactProduct tours →

@tour-kit/hints

< 6.5 KB

Persistent contextual hints and pulsing beacons.

Pulsing beaconsContextual tipsDismissal tracking
$ pnpm add @tour-kit/hintsFeature hints →
Extensions
@tour-kit/announcementsModals, toasts, banners, slideouts@tour-kit/checklistsOnboarding tasks with dependencies@tour-kit/surveysNPS, CSAT & CES microsurveys@tour-kit/analyticsPostHog, Mixpanel, Amplitude, GA4@tour-kit/adoptionUsage tracking & nudge scheduler@tour-kit/mediaYouTube, Vimeo, Loom, Lottie, GIF@tour-kit/schedulingTime-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/core
Get started