Skip to main content

@tour-kit/core + @tour-kit/react · Free & MIT

Product tours your users
actually finish.

A React product tour library built headless-first — spotlight overlays, router-aware steps, and WCAG 2.1 AA accessibility, styled by your design system.

Build my first tourView on GitHub
$ pnpm add @tour-kit/react

< 8KB core gzipped · TypeScript strict · WCAG 2.1 AA · own your code

Why tours get skipped

Most product tours die one of three deaths: they break, they bloat, or they look like a foreign object. None of those are user problems — they're library problems.

Tours break on route changes

window.location-based libraries shatter the moment you migrate routers or lazy-mount a target.

Router-aware by design

First-class adapters for Next.js (App + Pages), React Router, and TanStack Router; targets re-resolve on navigation.

47KB to show three tooltips

Legacy tour libraries ship more JavaScript than React itself — and your users pay the download.

Under 8KB, tree-shakeable

The headless core is < 8KB gzipped; styled components add < 12KB. Code-splits cleanly behind a dynamic import.

Looks like a browser extension

Injected CSS and fixed themes make every tour look bolted on — brand teams notice.

Your components, your tokens

Headless hooks plus shadcn-native styled components — the tour is indistinguishable from your product.

Three steps to production

No iframe embeds, no script tags, no vendor dashboard. The code lands in your repo.

  1. 1

    Install

    One package, zero config.

    terminal
    pnpm add @tour-kit/react
  2. 2

    Compose

    Declarative config, headless or pre-styled — the tour renders with your design system.

    onboarding.tsx
    import { Tour, TourStep } from '@tour-kit/react'

<Tour id="welcome">
  <TourStep
    target="#sidebar"
    title="Navigation"
    content="Browse your projects here."
  />
</Tour>
  3. 3

    Ship it

    The tour lives in your bundle and your version control — no embed script, no vendor dashboard.

    Read the docs

Two ways in. Same engine.

Start with the styled components and eject to headless when the design team comes knocking — both packages share the same core and the same MIT license.

@tour-kit/react

Pre-styled components — the fast path

Drop-in Tour, TourStep, spotlight overlay, and card — shadcn-native styling, router adapters, and sensible defaults. Most teams ship with this.

React docs

@tour-kit/core

Headless engine — total control

Hooks, positioning, focus management, and state with zero UI opinions — render every pixel yourself, in any framework wrapper.

Core docs

Everything a tour needs to survive production

Three pillars every userTourKit package shares, plus the tour-specific engineering that DIY attempts discover the hard way.

Headless or pre-styled

Styled Tour/TourStep components for speed, headless hooks for control — same engine underneath.

WCAG 2.1 AA accessible

Focus trap, keyboard navigation, screen-reader announcements, reduced-motion — Lighthouse a11y 100.

The code lands in your repo

MIT licensed, free forever. Tours are TypeScript in your bundle, not a script tag from a vendor.

Router adapters

Next.js App & Pages Router, React Router, TanStack Router — multi-page tours that survive navigation.

Progress persistence

localStorage by default, or your API via a one-line storage adapter — returning users resume, not restart.

Tour analytics

@tour-kit/analytics

Step views, completions, and drop-offs streamed to PostHog, Mixpanel, Amplitude, or GA4.

Free & open source

Build your first tour — free & MIT, no signup.

Install the package and ship a tour today. Pro packages add checklists, announcements, and surveys when you need them.

Build my first tourSee pricing

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

The third option between SaaS and DIY

userTourKitSaaS platformsOSS libraries
CostFree (MIT)$200–900/moFree
Bundle impact< 8KBExternal script30–50KB
Headless mode✓——
Full comparison →

The honest pitch

Why pick a fresh library?

Tour Kit is new — no legacy API debt, no corporate-UX baggage, no AGPL contamination. Built headless-first so you bring your own components and styles. Every chip below is a measured technical fact, not a marketing claim.

  • < 8KB core gzipped
  • WCAG 2.1 AA
  • Lighthouse a11y 100
  • TypeScript strict
  • >80% test coverage
  • MIT core
  • React 19 ready
  • shadcn-native

See the documentation or source on GitHub.

Tour questions, answered straight

What developers ask before adding a product tour dependency.

@tour-kit/core and @tour-kit/react are MIT licensed — free forever, commercial use included, no watermark, no MAU caps. Pro packages (checklists, announcements, surveys, analytics) are a separate $99 one-time license when you need them.

Own your onboarding. Ship it today.

Free, MIT, under 8KB. The tour library you'd have built with three spare weeks.

$pnpm add @tour-kit/react
Get started

Pairs well with

Feature hintsFor single features that don’t need a full walkthrough.Onboarding checklistsGive users a persistent path after the tour ends.