Tour Kit documentation hub: guides, tutorials, and API reference

Most React libraries ship a README and call it documentation. Tour Kit takes a different approach. Ten packages, each with its own API surface, means a README won't cut it. You need structured guides, typed API references, runnable examples, and search that actually works across the entire surface area.

This page maps every piece of Tour Kit documentation. Whether you're installing for the first time, wiring up analytics, or building a fully custom onboarding flow, start here.

npm install @tourkit/core @tourkit/react

Explore the full docs at usertourkit.com or keep reading for a guided tour of what's available.

What is Tour Kit?

Tour Kit is a headless, composable product tour library for React that ships as 10 independent packages. You install only what you need. The @tourkit/core package weighs 7.2KB gzipped with zero runtime dependencies, while the full @tourkit/react layer adds another 11.8KB. Compare that to React Joyride at 37KB or Shepherd.js at 28KB (bundlephobia, April 2026).

"Headless" means Tour Kit handles positioning, step sequencing, keyboard navigation, focus management, and ARIA attributes. You bring the UI. Works with shadcn/ui, Radix, Tailwind, or any design system.

React 18 and 19 are both supported. TypeScript strict mode is enabled across all packages with full type exports. No @types/ packages to chase down.

Why documentation matters for a 10-package library

Tour Kit's 10-package monorepo creates a documentation challenge that most libraries never face. Each package exports its own hooks, components, providers, and types. The core alone has 12 exported hooks, 4 providers, and over 30 TypeScript types. Cross-package interactions add another layer. Without clear docs, developers spend more time reading source code than building features.

According to Archbee's analysis of developer documentation patterns, clear quickstarts reduce integration time from weeks to hours (Archbee, 2026). For Tour Kit, that means going from npm install to a working 5-step tour in under 10 minutes. We benchmarked the quick start path at 7 minutes in a fresh Vite project and 9 minutes with Next.js App Router.

The docs run on Fumadocs, the same framework behind Shadcn UI's documentation. Fumadocs follows a headless Content-Core-UI architecture that mirrors Tour Kit's own design philosophy.

Builder.io's 2026 React Component Library analysis is direct: "Developer experience should include clear documentation with working examples and strong TypeScript support" (Builder.io, 2026). Here's how Tour Kit meets that standard.

Documentation structure: the complete map

Tour Kit's documentation spans 60+ pages organized into six sections, each serving a different stage of the developer journey from first install through production optimization. The docs cover approximately 150 exported APIs across all 10 packages.

Getting started

The fastest path from zero to a working tour. Three pages, no detours.

Start here if you've never used Tour Kit. The quick start produces a working tour in under 10 minutes.

Core package API

The @tourkit/core package contains all framework-agnostic logic. Every other package depends on it. The core docs cover:

• Hooks: useTour(), useStep(), useTourHighlight(), plus 9 additional hooks for controlling tour state programmatically
• Providers: TourProvider and TourKitProvider configuration, nesting rules, context access
• Types: all 30+ TypeScript exports including TourConfig, StepConfig, TourState, position types, callback signatures
• Utilities: position engine, storage adapters, helper functions

The core API reference documents every exported function with inline TypeScript annotations, parameter descriptions, return types, and usage examples.

React package components

The @tourkit/react package wraps core logic in React components. The docs split into four areas.

Components cover TourStep, TourOverlay, TourTooltip, and headless variants that render no UI. Each component page shows the props table alongside both styled and headless examples.

Hooks document React-specific hooks like useTourNavigation() and useTourProgress(). These extend core hooks with React lifecycle integration.

Styling guides walk through Tailwind, CSS modules, and vanilla CSS approaches. Tour Kit ships zero default styles, so the guides show how to build a tooltip matching your design system in about 50 lines of code.

Router adapters explain integration with Next.js App Router, React Router, and TanStack Router for cross-page step transitions.

Extended packages

Eight additional packages handle specific onboarding patterns. Each has its own documentation section.

You install only the packages you need. The docs for each package stand alone. No need to read the analytics docs if you're only using hints.

Guides

Guides cover cross-cutting concerns that span multiple packages. These are the "how do I actually do this in production?" articles.

• Accessibility: WCAG 2.1 AA compliance, focus trapping, screen reader announcements, prefers-reduced-motion
• Persistence: saving tour progress to localStorage, sessionStorage, or a backend API
• Animations: CSS transitions, Framer Motion integration, motion preferences
• Next.js integration: App Router setup, Server Component boundaries, dynamic imports
• Vite integration: Vite-specific configuration, tree-shaking verification
• Router integration: cross-page tours with Next.js, React Router, TanStack Router
• Analytics integration: wiring Tour Kit events to your analytics stack
• Adoption tracking: measuring feature adoption with the adoption package
• Checklists + tours: combining checklist tasks with guided tours
• Announcements + scheduling: time-based product announcements
• Branching tours: conditional step logic based on user actions
• Troubleshooting: common issues, error messages, debugging patterns

Examples

Working code examples with full source. Complete applications, not snippets.

• Basic tour: minimal 5-step tour with styled tooltips (under 80 lines of code)
• Onboarding flow: multi-page onboarding with checklists and progress tracking
• Headless custom: fully custom UI using only headless hooks, zero Tour Kit CSS

The examples directory includes both a Next.js App Router project and a Vite + React project, so you can see Tour Kit in the framework you actually use.

How Tour Kit documents a monorepo

Documenting 10 packages as a unified library is harder than documenting a single package, and the approach matters because developers shouldn't need to understand your directory structure to find what they need. Most multi-package libraries dump each package's docs into separate READMEs. Tour Kit indexes everything into one searchable site with cross-references between packages.

Unified search across all packages. The docs site indexes every page from every package into a single Orama-powered search backend that runs client-side with zero API calls. Search for useTour and you get results from core, react, and every guide that references it.

Cross-package linking. When the analytics docs reference TourProvider, they link directly to the core provider docs. The docs form a connected graph, not isolated silos. Over 200 internal cross-references connect the 60+ documentation pages.

Package-scoped navigation. The left sidebar organizes by package, each expandable independently. The navigation mirrors the packages/ directory structure developers see in the repo.

We tested this structure against the Stripe and Docker documentation models that Archbee highlights as exemplary. The single-page search matches Clearbit's instant Cmd/Ctrl+F pattern.

API reference patterns

Tour Kit documents approximately 150 exported APIs across all 10 packages. Every function, hook, component, and type gets a structured reference entry with four parts: the TypeScript signature, a parameter table, return type documentation, and at least one runnable example.

TypeScript signatures with generics. Not simplified pseudocode. The actual signature you'll see in your editor's autocomplete:

// packages/core/src/hooks/use-tour.ts
function useTour<TStepData = unknown>(
  config: TourConfig<TStepData>
): TourState<TStepData>;

Parameter tables. Each parameter gets a row with the name, type, default value, and a one-line description. Required parameters are marked.

Return type documentation. For hooks that return objects, every property is documented individually. useTour() returns 7 properties including currentStep, isActive, next, prev, start, and stop, each with its type and behavior described.

Usage examples. Every API entry includes at least one runnable example you can copy into a component:

// src/components/TourDemo.tsx
import { TourProvider, useTour } from '@tourkit/react';

const steps = [
  { target: '#welcome', content: 'Welcome to the app' },
  { target: '#sidebar', content: 'Navigate from here' },
];

function TourControls() {
  const { isActive, start, next, stop } = useTour({ steps });

  if (!isActive) {
    return <button onClick={start}>Start tour</button>;
  }

  return (
    <div>
      <button onClick={next}>Next</button>
      <button onClick={stop}>Skip</button>
    </div>
  );
}

Best practices for using Tour Kit docs

After building and maintaining 60+ documentation pages, we've identified the patterns that consistently get developers productive fastest. The median time from first doc visit to working tour is under 15 minutes when following these recommendations.

Start with the quick start, not the API reference. The quick start is designed to give you a working tour in under 10 minutes. Once you have something running, the API reference makes more sense because you have concrete context.

Use the guides for production patterns. The component API tells you what props exist. The guides tell you how to combine them for real scenarios like accessibility compliance, cross-page tours, or analytics integration. Most production questions are answered in guides, not API docs.

Search before browsing. With 10 packages and 15+ guides, browsing the sidebar can feel overwhelming. The search covers every page. Type what you need (focus trap, persist progress, NPS survey) and go directly to the relevant section.

Read the TypeScript setup page early. Tour Kit uses generics for step data typing. The TypeScript page explains how to type your step configurations so you get autocomplete on custom step properties. Skipping this leads to any types and missed errors.

Check the troubleshooting guide when stuck. Common errors like "TourProvider not found" or "step target not in DOM" have specific solutions documented with the exact error messages you'll see.

Tools and frameworks behind the docs

Tour Kit's documentation site runs on a technical stack chosen specifically for developer experience and AI discoverability. The site loads in under 1.5 seconds on a 3G connection because every page is pre-rendered at build time. Here's what powers it.

Fumadocs handles the documentation framework. It provides MDX processing, sidebar generation from file structure, search indexing, and TypeScript Twoslash support for inline type annotations in code blocks. Fumadocs is used by Shadcn UI, BetterAuth, and Unkey (Fumadocs, 2026).

Next.js App Router renders the site. All 60+ pages are statically generated at build time. AI crawlers and search engines get fully rendered HTML on the first request with no client-side rendering needed for content.

LLM-accessible docs. Tour Kit generates /llms.txt (2KB summary) and /llms-full.txt (full API reference) for AI tools to consume directly. As of April 2026, almost no other React library offers this.

A McKinsey survey found 88% of companies reported regular AI use in documentation workflows by Q4 2025, up from 78% the prior year (Fluid Topics, 2026). Making docs AI-readable isn't optional anymore.

Measuring documentation quality

Good docs aren't a feeling, they're measurable. Tour Kit tracks four metrics to identify gaps and confirm what's working. Here's what we watch.

Time to first working tour. We benchmarked the quick start path at 7 minutes in Vite and 9 minutes in Next.js App Router. Target is under 10 minutes. Any regression gets flagged in CI.

Search success rate. How often a search query leads to a page click versus a refined search. Orama provides these analytics client-side. If people search for something and don't click, the content is missing or poorly titled.

Page bounce rate on API references. API reference pages should have low bounce rates because developers land there with specific intent. High bounce means the page doesn't answer the question implied by the search query.

GitHub issue reduction. Questions that belong in docs but arrive as GitHub issues signal documentation gaps. We track the "docs" label and backfill missing content.

Tour Kit is still a young project with a smaller community than React Joyride (603K weekly npm downloads) or Shepherd.js (95K weekly downloads). The documentation doesn't have the community-contributed examples that come with years of adoption. We're transparent about that.

Related resources

This pillar page connects to deeper content across the Tour Kit blog. Explore by topic:

Getting started tutorials:

• How to add a product tour to a React 19 app in 5 minutes
• How to add a product tour to an Astro site with React islands
• Next.js App Router product tour setup

Architecture and patterns:

• Building a plugin system for a product tour library
• Animation performance in product tours: requestAnimationFrame vs CSS
• Building ARIA-compliant tooltip components from scratch

Analytics and measurement:

• Amplitude + Tour Kit: measuring onboarding impact on retention
• How to calculate feature adoption rate (with code examples)
• Cohort analysis for product tours: finding what works

Comparisons and alternatives:

• Best free product tour libraries in 2026 (open source only)
• 8 TypeScript product tour libraries ranked by developer experience
• Tour Kit vs React Joyride

FAQ

Where do I find Tour Kit's API documentation?

Tour Kit's complete API reference lives at usertourkit.com/docs. Every exported hook, component, provider, and TypeScript type is documented with signatures, parameter tables, and runnable code examples covering all 10 packages.

Does Tour Kit have TypeScript documentation?

Tour Kit is written in TypeScript with strict mode enabled across every package. A dedicated TypeScript setup guide covers generic patterns, type imports, and strict configuration. API entries show full TypeScript signatures with generics.

How is Tour Kit's documentation structured?

Tour Kit organizes its 60+ documentation pages into six sections: getting started, core package API, React components, extended packages (8 additional packages), cross-cutting guides, and working examples. Unified search spans all packages.

What framework does Tour Kit use for its docs site?

Tour Kit's documentation is built on Fumadocs, the same Next.js framework used by Shadcn UI and BetterAuth. Fumadocs provides MDX processing, automatic sidebar generation, Orama-powered search, and TypeScript Twoslash inline type annotations.

Can AI tools access Tour Kit's documentation?

Tour Kit generates /llms.txt and /llms-full.txt files with structured, AI-readable documentation. These files help ChatGPT, Claude, and Perplexity give accurate API answers. The docs site also serves fully static HTML that AI crawlers parse without JavaScript.

How do I search across all Tour Kit packages?

The documentation site includes client-side search powered by Orama that indexes every page from every package. Type any hook name, component, or error message to find relevant content across all 10 packages and 15+ guides. Search runs entirely in the browser.

Where are working code examples for Tour Kit?

Tour Kit ships working examples in both Next.js App Router and Vite + React projects in the examples/ directory. Every API reference page also includes inline, copy-paste-ready TypeScript examples.

Does Tour Kit have accessibility documentation?

Tour Kit includes a dedicated accessibility guide covering WCAG 2.1 AA compliance, focus trapping, screen reader announcements, keyboard navigation, and prefers-reduced-motion support. Lighthouse Accessibility score: 100.

How often is Tour Kit's documentation updated?

Tour Kit documentation ships alongside every package release. MDX files live in the monorepo, so doc changes go through the same PR and review process as code. The /llms.txt and /llms-full.txt files regenerate on every build.

Related articles

Pillar PagesApr 12, 2026 · 15 min read

Headless onboarding: what it means, why it matters, and how to start

What headless onboarding is, why it beats styled tour libraries for design system teams, and how to implement it with code examples.

Read article

Pillar PagesApr 12, 2026 · 23 min read

Onboarding metrics explained: every KPI with formulas (2026)

Master every onboarding KPI from activation rate to NPS. Each metric includes the formula, benchmark data, and React tracking code.

Read article

Pillar PagesApr 12, 2026 · 22 min read

Onboarding software: every tool, library, and platform compared (2026)

Compare 25+ onboarding tools across enterprise DAPs, mid-market SaaS, and open-source libraries. Pricing, bundle sizes, and decision framework included.

Read article

Pillar PagesApr 12, 2026 · 15 min read

The open-source onboarding stack: build your own with code

Assemble a code-first onboarding stack from open-source tools. Compare tour libraries, analytics, and surveys to own your onboarding.

Read article