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.

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

Get startedView on GitHub
your-app.com

Welcome to your dashboard

This is where you'll manage your projects.

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

Try before you install

Interactive demos for every package. No signup, no sandbox — just click through and see what ships.

@tour-kit/react
your-app.com/dashboard
Dashboard
Projects
Settings
Active
12
Complete
47
Revenue
$8.2k

These are visual mockups · See the docs for real integration examples

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. TourKit 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>[]
  },
});
Modular by design

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

→

Stop renting your onboarding

SaaS platforms charge hundreds a month for UI you can't customize. Open-source alternatives ship bloated bundles without TypeScript or accessibility. User Tour Kit is the third option.

User Tour KitSaaS platformsOSS libraries
CostFree core$200–900/moFree
Bundle impact< 8KBExternal script30–50KB
CustomizationYour componentsTheir UI + CSS overridesCSS overrides
Headless mode✓——
TypeScriptStrict native~~
AccessibilityWCAG 2.1 AA~—
Design system fit✓—~
Self-hosted✓—✓
Data ownership✓—✓
See full comparison →
MIT Licensed·Star on GitHub·100% TypeScript·Contribute·< 8KB gzipped

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