TourKit
API Reference

API Reference

Complete API reference for all User Tour Kit packages — hooks, components, providers, utilities, and TypeScript type exports

API Reference

Complete API documentation for all User Tour Kit packages. Each page contains exports, types, and usage examples.

For AI Assistants

Download llms.txt for a quick reference guide optimized for LLMs and AI coding assistants.


Core Packages


Extended Packages


Quick Reference

Most Used Exports

ExportPackageDescription
useTourcore/reactMain tour control hook
TourreactDeclarative tour wrapper
TourStepreactStep definition component
TourCardreactTooltip card component
TourOverlayreactSpotlight overlay
HinthintsHint with hotspot and tooltip
useHinthintsSingle hint control
usePersistencecore/reactState persistence
useFeatureadoptionFeature adoption tracking
useAnalyticsanalyticsAnalytics tracking
useAnnouncementannouncementsAnnouncement control
useChecklistchecklistsChecklist progress
TourMediamediaEmbedded media component
useScheduleschedulingTime-based scheduling

Package Sizes

PackageGzipped
@tour-kit/core< 8KB
@tour-kit/react< 12KB
@tour-kit/hints< 5KB
@tour-kit/adoption< 10KB
@tour-kit/analytics< 4KB
@tour-kit/announcements< 15KB
@tour-kit/checklists< 12KB
@tour-kit/media< 8KB
@tour-kit/scheduling< 3KB

Import Patterns

// Import everything from @tour-kit/react
import {
  Tour,
  TourStep,
  TourCard,
  TourOverlay,
  useTour,
  usePersistence,
} from '@tour-kit/react';

// Headless components
import { TourCardHeadless } from '@tour-kit/react/headless';

With Hints

import { Tour, TourStep, TourCard } from '@tour-kit/react';
import { HintsProvider, Hint, useHint } from '@tour-kit/hints';

With Analytics

import { AnalyticsProvider, createAnalytics, consolePlugin } from '@tour-kit/analytics';

const analytics = createAnalytics({
  plugins: [consolePlugin()],
});

With Adoption Tracking

import { AdoptionProvider, useFeature, AdoptionNudge } from '@tour-kit/adoption';

With Announcements

import { AnnouncementsProvider, useAnnouncement, AnnouncementModal } from '@tour-kit/announcements';

With Checklists

import { ChecklistProvider, useChecklist, ChecklistPanel } from '@tour-kit/checklists';

With Media

import { TourMedia, YouTubeEmbed } from '@tour-kit/media';

With Scheduling

import { useSchedule, checkSchedule } from '@tour-kit/scheduling';

Core Only (Framework-agnostic)

import {
  useTour,
  usePersistence,
  createTour,
  createStep,
} from '@tour-kit/core';

Type Exports

All packages export TypeScript types:

import type {
  // Config
  TourKitConfig,
  KeyboardConfig,
  SpotlightConfig,
  PersistenceConfig,

  // Tour
  Tour,
  TourStep,
  TourState,
  Placement,

  // Router
  RouterAdapter,
  MultiPagePersistenceConfig,

  // Hook returns
  UseTourReturn,
  UsePersistenceReturn,
} from '@tour-kit/react';

import type {
  HintConfig,
  HintState,
  HotspotPosition,
} from '@tour-kit/hints';

import type {
  Feature,
  AdoptionCriteria,
  FeatureUsage,
  AdoptionStatus,
} from '@tour-kit/adoption';

import type {
  TourEvent,
  TourEventName,
  AnalyticsPlugin,
} from '@tour-kit/analytics';

import type {
  AnnouncementConfig,
  FrequencyRule,
  AudienceCondition,
} from '@tour-kit/announcements';

import type {
  ChecklistConfig,
  ChecklistTaskConfig,
  TaskAction,
} from '@tour-kit/checklists';

import type {
  MediaType,
  TourMediaConfig,
  CaptionTrack,
} from '@tour-kit/media';

import type {
  Schedule,
  RecurringPattern,
  BusinessHours,
} from '@tour-kit/scheduling';

On this page