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
@tour-kit/core
Framework-agnostic hooks, utilities, and types
@tour-kit/react
React components, headless components, and router adapters
@tour-kit/hints
Hint components, hooks, and headless variants
Extended Packages
@tour-kit/adoption
Feature adoption tracking with nudges
@tour-kit/analytics
Plugin-based analytics integration
@tour-kit/announcements
Multi-variant product announcements
@tour-kit/checklists
Interactive onboarding checklists
@tour-kit/media
Video/GIF/Lottie embeds for tours
@tour-kit/scheduling
Time-based scheduling utilities
Quick Reference
Most Used Exports
| Export | Package | Description |
|---|---|---|
useTour | core/react | Main tour control hook |
Tour | react | Declarative tour wrapper |
TourStep | react | Step definition component |
TourCard | react | Tooltip card component |
TourOverlay | react | Spotlight overlay |
Hint | hints | Hint with hotspot and tooltip |
useHint | hints | Single hint control |
usePersistence | core/react | State persistence |
useFeature | adoption | Feature adoption tracking |
useAnalytics | analytics | Analytics tracking |
useAnnouncement | announcements | Announcement control |
useChecklist | checklists | Checklist progress |
TourMedia | media | Embedded media component |
useSchedule | scheduling | Time-based scheduling |
Package Sizes
| Package | Gzipped |
|---|---|
| @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
React App (Recommended)
// 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';