Skip to main content

@tour-kit/core + @tour-kit/react · Free in development

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

Tree-shakeable core · 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 4 KB tree-shaken

Import one hook from the headless core and you ship under 4 KB; the rest tree-shakes away. Styled components stay under 12 KB gzipped. 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 licence.

@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

Free while you build, one-time when you ship. 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 in development

Build your first tour, free in development, 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 in development, no signup, no credit card.

The third option between SaaS and DIY

userTourKitSaaS platformsOSS libraries
CostFree in dev, from $9.99$200–900/moFree
Bundle impactUnder 4 KB per hookExternal 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.

  • Under 4 KB tree-shaken
  • WCAG 2.1 AA
  • Lighthouse a11y 100
  • TypeScript strict
  • >80% test coverage
  • Free in development
  • 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 is source-available under BSL 1.1: free for development, evaluation, testing and CI, with no feature gates and no MAU caps. A production deployment needs a one-time licence key, from $9.99 for a single project.

Own your onboarding. Ship it today.

Free in development, tree-shakeable to the hook you call. 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.