# userTourKit v1.0.6 — Generated 2026-06-11T07:31:35Z

# userTourKit

> userTourKit is a headless onboarding and product tour library for React. It provides sequential guided tours, persistent hints, onboarding checklists, product announcements, media embeds, feature adoption tracking, analytics integration, and time-based scheduling. All components are accessible (WCAG 2.1 AA), keyboard-navigable, and work with Next.js and Vite. userTourKit (usertourkit.com) is an independent project and is NOT affiliated with the similarly-named "usertour" open-source project (github.com/usertour/usertour) or the SaaS at usertour.io.

## Getting Started

- [Getting Started](https://usertourkit.com/docs/getting-started): Set up userTourKit in your React application with step-by-step installation, configuration, and TypeScript guides
- [Installation](https://usertourkit.com/docs/getting-started/installation): Install @tour-kit/core and @tour-kit/react with npm, pnpm, yarn, or bun and configure peer dependencies for React 18+
- [Quick Start](https://usertourkit.com/docs/getting-started/quick-start): Create your first multi-step product tour in under 5 minutes with Tour, TourStep, and useTour hook examples
- [TypeScript](https://usertourkit.com/docs/getting-started/typescript): Configure TypeScript strict mode, use inferred step types, and leverage generic tour configurations in userTourKit

## Core

- [@tour-kit/core](https://usertourkit.com/docs/core): Framework-agnostic hooks and utilities for building product tours — state management, positioning, and accessibility
- [Diagnostic Engine](https://usertourkit.com/docs/core/diagnostic): Replace the silent "tour didn't fire" failure mode with a structured `EligibilityReport` that names every gate's outcome.
- [useAdvanceOn](https://usertourkit.com/docs/core/hooks/use-advance-on): useAdvanceOn hook: automatically advance tour steps when users click buttons, submit forms, or interact with elements
- [useBranch](https://usertourkit.com/docs/core/hooks/use-branch): useBranch hook: trigger conditional branching paths from step content based on user choices or application state
- [useDirection](https://usertourkit.com/docs/core/hooks/use-direction): Hook returning the resolved text direction (ltr or rtl) and an isRTL boolean for RTL-aware components
- [useElementPosition](https://usertourkit.com/docs/core/hooks/use-element-position): useElementPosition hook: track DOM element position with automatic updates on scroll, resize, and layout changes
- [useFocusTrap](https://usertourkit.com/docs/core/hooks/use-focus-trap): useFocusTrap hook: trap keyboard focus within tour step elements for WCAG 2.1 AA accessible navigation
- [useKeyboard](https://usertourkit.com/docs/core/hooks/use-keyboard): useKeyboard hook: add arrow key navigation, Escape to close, and custom keyboard shortcuts to product tours
- [useLocale](https://usertourkit.com/docs/core/hooks/use-locale): Read the current LocaleContextValue (locale, messages, direction, optional host-side t override) from the nearest LocaleProvider.
- [useMediaQuery](https://usertourkit.com/docs/core/hooks/use-media-query): useMediaQuery hook: respond to viewport changes and prefers-reduced-motion for responsive, accessible product tours
- [usePersistence](https://usertourkit.com/docs/core/hooks/use-persistence): usePersistence hook: save and restore tour completion state across browser sessions with localStorage or custom adapters
- [useResolveLocalizedText](https://usertourkit.com/docs/core/hooks/use-resolve-localized-text): Returns a memoized (value) => string resolver. Use for consumer-authored copy that must be a string — aria-label, title, Dialog.Title.
- [useResolvedText](https://usertourkit.com/docs/core/hooks/use-resolved-text): Resolve a LocalizedText | ReactNode value into a ReactNode. Handles string interpolation, i18n key lookup, and ReactNode pass-through with one call.
- [useRoutePersistence](https://usertourkit.com/docs/core/hooks/use-route-persistence): useRoutePersistence hook: maintain tour progress when users navigate between pages in multi-page applications
- [useSegmentationContext](https://usertourkit.com/docs/core/hooks/use-segmentation-context): Low-level hook returning the raw SegmentationContextValue — registered segments, userContext, and currentUserId. Use useSegment / useSegments for typical lookups.
- [useSpotlight](https://usertourkit.com/docs/core/hooks/use-spotlight): useSpotlight hook: control spotlight overlay visibility, padding, border radius, and animation for tour steps
- [useStep](https://usertourkit.com/docs/core/hooks/use-step): useStep hook: access current step data, index, progress percentage, and isFirst/isLast flags in tour components
- [useTour](https://usertourkit.com/docs/core/hooks/use-tour): useTour hook: control tour state with start, next, prev, skip, and complete actions plus step tracking in React
- [useTourContext](https://usertourkit.com/docs/core/hooks/use-tour-context): Low-level hook returning the raw TourContext value. Use useTour for typical tour control; useTourContext for custom integrations.
- [useTourKitContext](https://usertourkit.com/docs/core/hooks/use-tour-kit-context): Hook returning the global TourKit context value — config, resolved direction, and global callbacks set on TourKitProvider
- [TourKitProvider](https://usertourkit.com/docs/core/providers/tour-kit-provider): TourKitProvider: wrap your app to enable global tour management, shared configuration, and multi-tour coordination
- [TourProvider](https://usertourkit.com/docs/core/providers/tour-provider): TourProvider: context provider that manages state, steps, and lifecycle for an individual product tour instance
- [Schemas](https://usertourkit.com/docs/core/schemas): Runtime Zod validation for JSON-authorable tour definitions — load tours from CMS, JSON files, or MDX frontmatter without bloating your main bundle.
- [Types](https://usertourkit.com/docs/core/types): TypeScript type definitions for userTourKit — tour, step, and configuration interfaces that power fully type-safe onboarding flows.
- [Config Types](https://usertourkit.com/docs/core/types/config-types): TypeScript interfaces for TourConfig, SpotlightConfig, KeyboardConfig, and other userTourKit configuration options
- [Step Types](https://usertourkit.com/docs/core/types/step-types): TypeScript interfaces for StepConfig, StepTarget, StepPlacement, and step-level configuration in userTourKit tours
- [Tour Types](https://usertourkit.com/docs/core/types/tour-types): TypeScript interfaces for TourState, TourActions, TourCallbacks, and the complete tour lifecycle type system
- [Accessibility Utilities](https://usertourkit.com/docs/core/utilities/a11y): Accessibility utilities: screen reader announcements, live regions, and ARIA attribute helpers for product tours
- [createStep](https://usertourkit.com/docs/core/utilities/create-step): createStep factory function: build type-safe step configurations with validation and IntelliSense autocomplete
- [createTour](https://usertourkit.com/docs/core/utilities/create-tour): createTour factory function: define type-safe tour configurations with validated steps, callbacks, and options
- [DOM Utilities](https://usertourkit.com/docs/core/utilities/dom): DOM utilities: element measurement, visibility detection, and target resolution for positioning tour tooltips
- [Helper Functions](https://usertourkit.com/docs/core/utilities/helpers): Helper utilities: step index calculations, progress percentages, and common tour operation functions in userTourKit
- [Logger Utility](https://usertourkit.com/docs/core/utilities/logger): Configurable logger utility: debug tour state transitions, step changes, and lifecycle events in development mode
- [Position Utilities](https://usertourkit.com/docs/core/utilities/position): Position engine: calculate tooltip placement with collision detection, viewport clamping, and RTL layout support
- [Scroll Utilities](https://usertourkit.com/docs/core/utilities/scroll): Scroll utilities: smooth scroll to target elements, scroll lock during tour steps, and overflow container handling
- [Storage Utilities](https://usertourkit.com/docs/core/utilities/storage): Storage adapters: persist tour state with localStorage, sessionStorage, or custom backends for completion tracking
- [Throttle Utilities](https://usertourkit.com/docs/core/utilities/throttle): Throttle and debounce utilities: rate-limit scroll, resize, and position update handlers for smooth tour performance

## React

- [@tour-kit/react](https://usertourkit.com/docs/react): Pre-styled React components for product tours with compound component patterns, asChild slot, and shadcn/ui compatibility
- [Router Adapters](https://usertourkit.com/docs/react/adapters): Router adapters enable multi-page product tours that persist across route changes in React framework applications
- [Next.js App Router Adapter](https://usertourkit.com/docs/react/adapters/next-app-router): Next.js App Router adapter: configure route-aware tours with usePathname integration for server component layouts
- [Next.js Pages Router Adapter](https://usertourkit.com/docs/react/adapters/next-pages-router): Next.js Pages Router adapter: set up multi-page tours with useRouter integration for _app.tsx tour providers
- [React Router Adapter](https://usertourkit.com/docs/react/adapters/react-router): React Router v6/v7 adapter: enable cross-route tours with useLocation and useNavigate integration in SPAs
- [Tour](https://usertourkit.com/docs/react/components/tour): Tour component: main wrapper that provides tour context, keyboard controls, spotlight overlay, and step management
- [TourCard](https://usertourkit.com/docs/react/components/tour-card): TourCard compound component: render step content with header, body, footer sub-components and asChild slot support
- [TourCard Migration (Refresh → Classic Opt-Out)](https://usertourkit.com/docs/react/components/tour-card-migration): Phase 4 of Tour Kit v2 refreshes the default <TourCard> look. This page explains the visual changes, how to pin the v1 ("classic") layout with variant="classic", and how to upgrade a custom theme.
- [TourClose](https://usertourkit.com/docs/react/components/tour-close): TourClose component: accessible close button with customizable icon, aria-label, and asChild polymorphic rendering
- [TourNavigation](https://usertourkit.com/docs/react/components/tour-navigation): TourNavigation component: previous/next buttons with automatic disable states and customizable button labels
- [TourOverlay](https://usertourkit.com/docs/react/components/tour-overlay): TourOverlay component: spotlight overlay that highlights the target element with configurable padding and animation
- [TourProgress](https://usertourkit.com/docs/react/components/tour-progress): TourProgress component: step counter and progress bar showing current position and total steps in the tour
- [TourRoutePrompt](https://usertourkit.com/docs/react/components/tour-route-prompt): Component shown when a multi-page tour needs to navigate to a different route — surfaces an explicit "Continue" / "Skip" choice when autoNavigate is off
- [TourStep](https://usertourkit.com/docs/react/components/tour-step): TourStep component: define individual steps with target selectors, placement, content, and advance-on triggers
- [Headless Components](https://usertourkit.com/docs/react/headless): Headless tour components: unstyled primitives with render props for building completely custom tour interfaces
- [Headless Examples](https://usertourkit.com/docs/react/headless/examples): Headless component examples: build custom tooltip cards, overlays, and navigation using userTourKit render props
- [HeadlessTourCard](https://usertourkit.com/docs/react/headless/headless-card): HeadlessTourCard: unstyled card primitive exposing step data, actions, and positioning via render props for custom UIs
- [HeadlessTourOverlay](https://usertourkit.com/docs/react/headless/headless-overlay): HeadlessTourOverlay: unstyled overlay primitive with spotlight cutout positioning exposed via render props
- [useTourRegistryContext](https://usertourkit.com/docs/react/hooks/use-tour-registry-context): Low-level hooks for reading the registered tour list inside MultiTourKitProvider. Use useTours for ergonomic access.
- [useTourRoute](https://usertourkit.com/docs/react/hooks/use-tour-route): useTourRoute hook: synchronize tour progress with router state for multi-page tours in Next.js and React Router
- [useTours](https://usertourkit.com/docs/react/hooks/use-tours): useTours hook: access all registered tour instances, check active states, and manage multiple tours from one place
- [Lazy Loading](https://usertourkit.com/docs/react/lazy): Code-split tour UI out of your initial bundle with @tour-kit/react/lazy — lazy components, TourSuspense, and preload functions
- [MultiTourKitProvider](https://usertourkit.com/docs/react/providers/multi-tour-kit-provider): MultiTourKitProvider: manage multiple independent tours with shared configuration, analytics, and storage settings
- [CSS Variables](https://usertourkit.com/docs/react/styling/css-variables): Customize userTourKit appearance with CSS custom properties for colors, spacing, border radius, and shadow values
- [Custom Components](https://usertourkit.com/docs/react/styling/custom-components): Build fully custom tour card, overlay, and navigation components using Tour Kit hooks and headless primitives
- [Tailwind CSS](https://usertourkit.com/docs/react/styling/tailwind): Style userTourKit components with Tailwind CSS utility classes, dark mode variants, and responsive breakpoints
- [target Prop](https://usertourkit.com/docs/react/target-prop): Three ways to point a TourStep at a DOM element — selector string, RefObject, or getter function — and the runtime resolution order.
- [Types](https://usertourkit.com/docs/react/types): TypeScript reference for @tour-kit/react — component prop interfaces, hook return shapes, multi-tour types, and shared cross-package aliases

## Hints

- [@tour-kit/hints](https://usertourkit.com/docs/hints): Add contextual hint beacons and hotspots that highlight features and guide users without interrupting their workflow
- [Components](https://usertourkit.com/docs/hints/components): Hint, HintHotspot, and HintTooltip components: add pulsing beacons and floating tooltips for feature discovery
- [Headless Hints](https://usertourkit.com/docs/hints/headless): Headless hint components: build custom beacon animations, tooltip designs, and hotspot UIs with render props
- [HintHeadless](https://usertourkit.com/docs/hints/headless/hint-headless): HeadlessHint: unstyled hint wrapper exposing visibility state and dismiss actions via render props for custom UIs
- [HintHotspotHeadless](https://usertourkit.com/docs/hints/headless/hint-hotspot-headless): HeadlessHintHotspot: unstyled hotspot trigger with positioning data exposed via render props for custom beacons
- [HintTooltipHeadless](https://usertourkit.com/docs/hints/headless/hint-tooltip-headless): HeadlessHintTooltip: unstyled floating tooltip with calculated position and collision avoidance via render props
- [Hooks](https://usertourkit.com/docs/hints/hooks): useHints and useHint hooks: programmatically show, dismiss, and query hint visibility state across your application
- [Persistence](https://usertourkit.com/docs/hints/persistence): Configure hint dismissal persistence with localStorage, sessionStorage, or custom backends to remember user choices
- [Types](https://usertourkit.com/docs/hints/types): TypeScript reference for @tour-kit/hints — HintProps, HintHotspotProps, HintTooltipProps, context types, and shared UnifiedSlot helpers
- [Variants](https://usertourkit.com/docs/hints/variants): Opinionated HintHotspot presets — badge, beacon-with-label, what-s-new-pill — with WCAG-AA contrast and ≥24×24 px hit targets.

## Adoption

- [Feature Adoption Tracking](https://usertourkit.com/docs/adoption): Track feature usage, measure adoption rates, and nudge users toward underused features with @tour-kit/adoption for React
- [Analytics Integration](https://usertourkit.com/docs/adoption/analytics): Adoption analytics integration: automatically send feature usage and nudge interaction events to your analytics provider
- [AdoptionNudge](https://usertourkit.com/docs/adoption/components/adoption-nudge): AdoptionNudge component: auto-showing prompt that appears when a user has not adopted a tracked feature after a threshold
- [Conditional Components](https://usertourkit.com/docs/adoption/components/conditional): IfNotAdopted and IfAdopted components: conditionally render content based on whether a user has adopted a specific feature
- [FeatureButton](https://usertourkit.com/docs/adoption/components/feature-button): FeatureButton component: button wrapper that automatically records usage events for the tracked feature on each click
- [NewFeatureBadge](https://usertourkit.com/docs/adoption/components/new-feature-badge): NewFeatureBadge component: badge overlay that highlights unadopted features and auto-hides after the user engages with them
- [Dashboard Components](https://usertourkit.com/docs/adoption/dashboard): Pre-built admin dashboard components for visualizing feature adoption metrics, trends, and per-feature engagement rates
- [AdoptionDashboard](https://usertourkit.com/docs/adoption/dashboard/adoption-dashboard): AdoptionDashboard component: complete admin view combining stats grid, category chart, and feature table in one layout
- [Charts](https://usertourkit.com/docs/adoption/dashboard/charts): AdoptionCategoryChart and AdoptionStatusBadge: visualize adoption distribution by category and individual feature status
- [Adoption Funnel](https://usertourkit.com/docs/adoption/dashboard/funnel): Step-by-step adoption funnel with drop-off percentages — Pendo/Userpilot parity, native CSS, no chart peer dependency.
- [Stat Cards](https://usertourkit.com/docs/adoption/dashboard/stats): AdoptionStatCard and AdoptionStatsGrid: display aggregate adoption metrics with trend indicators and percentage changes
- [AdoptionTable](https://usertourkit.com/docs/adoption/dashboard/table): AdoptionTable component: sortable, filterable table of tracked features showing adoption status, usage count, and trends
- [useAdoptionContext](https://usertourkit.com/docs/adoption/hooks/use-adoption-context): Low-level hook returning the raw AdoptionProvider context — features, usage map, nudge state, and full action surface
- [useAdoptionStats](https://usertourkit.com/docs/adoption/hooks/use-adoption-stats): useAdoptionStats hook: retrieve aggregated adoption metrics across all tracked features for dashboards and reporting
- [useFeature](https://usertourkit.com/docs/adoption/hooks/use-feature): useFeature hook: track individual feature usage, query adoption state, and record interactions for adoption metrics
- [useFunnelData](https://usertourkit.com/docs/adoption/hooks/use-funnel-data): Derive a current-state adoption funnel from useAdoptionStats — feed straight into AdoptionFunnel.
- [useNudge](https://usertourkit.com/docs/adoption/hooks/use-nudge): useNudge hook: manage nudge visibility, dismissal, snooze, and user interaction state for feature discovery prompts
- [AdoptionProvider](https://usertourkit.com/docs/adoption/providers/adoption-provider): AdoptionProvider: configure feature definitions, usage thresholds, nudge rules, and storage for the adoption tracking system
- [TypeScript Types](https://usertourkit.com/docs/adoption/types): TypeScript types for FeatureConfig, AdoptionState, NudgeRule, UsageThreshold, and the @tour-kit/adoption API surface

## Analytics

- [Analytics](https://usertourkit.com/docs/analytics): Plugin-based analytics for tracking tour starts, step views, completions, and hint interactions across any provider
- [Analytics Hooks](https://usertourkit.com/docs/analytics/hooks): useAnalytics hook: access the analytics tracker to send custom events and track tour interactions in React components
- [Analytics Plugins](https://usertourkit.com/docs/analytics/plugins): Analytics plugin system: choose from built-in integrations or create custom plugins with the AnalyticsPlugin interface
- [Amplitude Plugin](https://usertourkit.com/docs/analytics/plugins/amplitude): Amplitude analytics plugin: send tour and hint events to Amplitude with automatic property mapping and session tracking
- [Console Plugin](https://usertourkit.com/docs/analytics/plugins/console): Console analytics plugin: log all tour events with colored output for debugging analytics integration in development
- [Custom Analytics Plugins](https://usertourkit.com/docs/analytics/plugins/custom): Build custom analytics plugins by implementing the AnalyticsPlugin interface with track, identify, and flush methods
- [Google Analytics Plugin](https://usertourkit.com/docs/analytics/plugins/google-analytics): Google Analytics 4 plugin: send tour events as GA4 custom events with automatic parameter mapping and measurement ID
- [Mixpanel Plugin](https://usertourkit.com/docs/analytics/plugins/mixpanel): Mixpanel analytics plugin: track tour funnel events, step completions, and user engagement with Mixpanel properties
- [PostHog Plugin](https://usertourkit.com/docs/analytics/plugins/posthog): PostHog analytics plugin: capture tour events as PostHog actions with automatic feature flag and person property sync
- [AnalyticsProvider](https://usertourkit.com/docs/analytics/providers): AnalyticsProvider component: configure one or more analytics plugins and provide the tracker to your React component tree
- [Analytics Types](https://usertourkit.com/docs/analytics/types): TypeScript types for AnalyticsPlugin, AnalyticsEvent, TrackerConfig, and the analytics package public API surface

## Announcements

- [@tour-kit/announcements](https://usertourkit.com/docs/announcements): Product announcements with modal, toast, banner, slideout, and spotlight variants — priority queuing and audience targeting
- [Changelog](https://usertourkit.com/docs/announcements/changelog): Release history for the @tour-kit/announcements package — version-by-version log of breaking changes, new features, and bug fixes. Autogenerated from Changesets.
- [ChangelogPage Component](https://usertourkit.com/docs/announcements/changelog-component): Render a public changelog page in React and serialize the same entries as RSS 2.0 + JSON Feed 1.1.
- [Components](https://usertourkit.com/docs/announcements/components): Pre-styled announcement components: Modal, Toast, Banner, Slideout, and Spotlight with built-in close and action buttons
- [AnnouncementBanner](https://usertourkit.com/docs/announcements/components/banner): AnnouncementBanner component: full-width persistent bar for system notices with dismiss button and action link support
- [AnnouncementModal](https://usertourkit.com/docs/announcements/components/modal): AnnouncementModal component: centered dialog overlay for important product updates with title, body, and action buttons
- [AnnouncementSlideout](https://usertourkit.com/docs/announcements/components/slideout): AnnouncementSlideout component: side panel drawer for detailed product updates with rich content and multiple sections
- [AnnouncementSpotlight](https://usertourkit.com/docs/announcements/components/spotlight): AnnouncementSpotlight component: element highlight overlay for contextual feature announcements tied to specific UI areas
- [AnnouncementToast](https://usertourkit.com/docs/announcements/components/toast): AnnouncementToast component: auto-dismissing corner notification for quick updates with configurable duration and position
- [Variants](https://usertourkit.com/docs/announcements/components/variants): CVA variant exports for @tour-kit/announcements — bannerVariants, modalContentVariants, modalOverlayVariants, slideoutContentVariants, toastVariants, and the full styling surface
- [Audience Targeting](https://usertourkit.com/docs/announcements/configuration/audience): Target announcements to user segments with role-based, attribute, and custom predicate audience filtering rules
- [Frequency Rules](https://usertourkit.com/docs/announcements/configuration/frequency): Control announcement display frequency with once, daily, weekly, and session-based rules to avoid notification fatigue
- [Queue Management](https://usertourkit.com/docs/announcements/configuration/queue): Priority queue system: rank announcements by urgency, schedule display windows, and prevent overlapping notifications
- [Headless Components](https://usertourkit.com/docs/announcements/headless): Headless announcement components: unstyled Modal, Toast, Banner, Slideout, and Spotlight with render props for custom UIs
- [HeadlessBanner](https://usertourkit.com/docs/announcements/headless/banner): HeadlessAnnouncementBanner: unstyled banner primitive with dismiss and action state exposed via render props for theming
- [HeadlessModal](https://usertourkit.com/docs/announcements/headless/modal): HeadlessAnnouncementModal: unstyled dialog primitive with focus trap, backdrop click, and Escape key dismiss handling
- [HeadlessSlideout](https://usertourkit.com/docs/announcements/headless/slideout): HeadlessAnnouncementSlideout: unstyled drawer primitive with slide animation state and content sections via render props
- [HeadlessSpotlight](https://usertourkit.com/docs/announcements/headless/spotlight): HeadlessAnnouncementSpotlight: unstyled highlight primitive with target element positioning and overlay via render props
- [HeadlessToast](https://usertourkit.com/docs/announcements/headless/toast): HeadlessAnnouncementToast: unstyled notification primitive with auto-dismiss timer and position data via render props
- [useAnnouncement](https://usertourkit.com/docs/announcements/hooks/use-announcement): useAnnouncement hook: control visibility, dismissal, and action tracking for a single announcement instance in React
- [useAnnouncementQueue](https://usertourkit.com/docs/announcements/hooks/use-announcement-queue): useAnnouncementQueue hook: manage priority-based display ordering and automatic scheduling of queued announcements
- [useAnnouncements](https://usertourkit.com/docs/announcements/hooks/use-announcements): useAnnouncements hook: query all announcements, filter by status or variant, and manage the announcement collection state
- [useAnnouncementsContext](https://usertourkit.com/docs/announcements/hooks/use-announcements-context): Low-level hook returning the raw AnnouncementsProvider context — registered announcements, queue, queue config, and the full action surface
- [useFilteredAnnouncements](https://usertourkit.com/docs/announcements/hooks/use-filtered-announcements): Filter a list of AnnouncementConfig by their `audience` prop. Bulk segment evaluation that is safe under dynamic lists.
- [useResolvedText](https://usertourkit.com/docs/announcements/hooks/use-resolved-text): Re-export of @tour-kit/core's useResolvedText for ergonomic in-package access. Resolves LocalizedText | ReactNode into a ReactNode.
- [AnnouncementsProvider](https://usertourkit.com/docs/announcements/providers/announcements-provider): AnnouncementsProvider: configure announcement storage, queue behavior, frequency rules, and audience targeting at app level
- [Type Reference](https://usertourkit.com/docs/announcements/types): TypeScript types for Announcement, AnnouncementVariant, QueueConfig, AudienceRule, and the full announcements API surface

## Checklists

- [@tour-kit/checklists](https://usertourkit.com/docs/checklists): Onboarding checklists with task dependencies, progress tracking, persistence, and optional tour integration for React apps
- [Components](https://usertourkit.com/docs/checklists/components): Pre-styled checklist components with shadcn/ui patterns: Checklist, ChecklistTask, ChecklistProgress, and ChecklistLauncher
- [Checklist](https://usertourkit.com/docs/checklists/components/checklist): Checklist component: main container rendering tasks with progress header, completion state, and configurable layout options
- [ChecklistLauncher](https://usertourkit.com/docs/checklists/components/checklist-launcher): ChecklistLauncher component: floating action button to toggle checklist panel visibility with badge showing remaining tasks
- [ChecklistPanel](https://usertourkit.com/docs/checklists/components/checklist-panel): ChecklistPanel component: floating side panel container with slide-in animation for persistent checklist access
- [ChecklistProgress](https://usertourkit.com/docs/checklists/components/checklist-progress): ChecklistProgress component: visual progress bar with percentage, completed count, and animated fill for task completion
- [ChecklistTask](https://usertourkit.com/docs/checklists/components/checklist-task): ChecklistTask component: individual task item with checkbox, label, description, completion state, and action button
- [Variants](https://usertourkit.com/docs/checklists/components/variants): CVA variant exports for @tour-kit/checklists — checklistVariants, checklistTaskVariants, checklistProgressVariants, checklistLauncherVariants, checklistPanelVariants, and the full styling surface
- [Headless Components](https://usertourkit.com/docs/checklists/headless): Headless checklist components: unstyled primitives with render props for building custom checklist and task UIs
- [ChecklistHeadless](https://usertourkit.com/docs/checklists/headless/checklist-headless): HeadlessChecklist component: unstyled checklist container exposing tasks, progress, and actions via render props
- [TaskHeadless](https://usertourkit.com/docs/checklists/headless/task-headless): HeadlessTask component: unstyled task primitive exposing completion state, actions, and dependency info via render props
- [useChecklist](https://usertourkit.com/docs/checklists/hooks/use-checklist): useChecklist hook: manage task completion, track overall progress, and control checklist state with toggle and reset actions
- [useChecklistPersistence](https://usertourkit.com/docs/checklists/hooks/use-checklist-persistence): useChecklistPersistence hook: save and restore checklist completion state across sessions with pluggable storage adapters
- [useChecklistsProgress](https://usertourkit.com/docs/checklists/hooks/use-checklists-progress): useChecklistsProgress hook: get aggregated completion stats across all active checklists for dashboard or summary views
- [useTask](https://usertourkit.com/docs/checklists/hooks/use-task): useTask hook: control individual task state, trigger completion, handle dependencies, and access task metadata in React
- [ChecklistProvider](https://usertourkit.com/docs/checklists/providers/checklist-provider): ChecklistProvider: configure task definitions, dependencies, storage, and analytics integration for your checklist instance
- [Types](https://usertourkit.com/docs/checklists/types): TypeScript types for ChecklistConfig, TaskConfig, TaskDependency, ChecklistState, and the full checklists type system
- [Utilities](https://usertourkit.com/docs/checklists/utilities): Checklist utility functions: create type-safe configs, resolve dependencies, and calculate progress with pure functions
- [createChecklist & createTask](https://usertourkit.com/docs/checklists/utilities/create-checklist): createChecklist factory: build validated checklist configurations with type-safe task definitions and dependency declarations
- [Dependency Utilities](https://usertourkit.com/docs/checklists/utilities/dependencies): Dependency resolution utilities: topological sort, circular reference detection, and prerequisite task validation functions
- [Progress Utilities](https://usertourkit.com/docs/checklists/utilities/progress): Progress calculation utilities: compute completion percentages, remaining task counts, and estimated time to finish values

## Media

- [Media](https://usertourkit.com/docs/media): Embed YouTube, Vimeo, Loom, Wistia, GIF, and Lottie media in tours with automatic platform detection and accessibility
- [GifPlayer](https://usertourkit.com/docs/media/components/gif-player): GifPlayer component: animated GIF with play/pause toggle, reduced motion support, and accessible alt text for tour steps
- [LoomEmbed](https://usertourkit.com/docs/media/components/loom-embed): LoomEmbed component: embed Loom screen recordings in tour steps with automatic URL parsing and responsive iframe sizing
- [LottiePlayer](https://usertourkit.com/docs/media/components/lottie-player): LottiePlayer component: render lightweight vector animations from Lottie JSON files with loop, autoplay, and speed control
- [NativeVideo](https://usertourkit.com/docs/media/components/native-video): NativeVideo component: self-hosted HTML5 video with captions, poster images, responsive sources, and picture-in-picture
- [TourMedia](https://usertourkit.com/docs/media/components/tour-media): TourMedia component: unified media embed with automatic platform detection from URL — YouTube, Vimeo, Loom, or native video
- [VimeoEmbed](https://usertourkit.com/docs/media/components/vimeo-embed): VimeoEmbed component: embed Vimeo videos with privacy controls, custom colors, autoplay options, and responsive sizing
- [WistiaEmbed](https://usertourkit.com/docs/media/components/wistia-embed): WistiaEmbed component: embed Wistia videos with enterprise popover, chapter markers, and advanced analytics integration
- [YouTubeEmbed](https://usertourkit.com/docs/media/components/youtube-embed): YouTubeEmbed component: embed YouTube videos with GDPR privacy-enhanced mode, captions, and responsive aspect ratios
- [Headless API](https://usertourkit.com/docs/media/headless): Headless media components: unstyled video and animation primitives with full playback state exposed via render props
- [MediaHeadless](https://usertourkit.com/docs/media/headless/media-headless): HeadlessMedia: unstyled media primitive exposing playback state, duration, progress, and control actions via render props
- [useMediaEvents](https://usertourkit.com/docs/media/hooks/use-media-events): useMediaEvents hook: track play, pause, complete, and seek events from embedded media for analytics integration in tours
- [usePrefersReducedMotion](https://usertourkit.com/docs/media/hooks/use-prefers-reduced-motion): usePrefersReducedMotion hook: detect the prefers-reduced-motion media query to pause GIFs and animations automatically
- [useResponsiveSource](https://usertourkit.com/docs/media/hooks/use-responsive-source): useResponsiveSource hook: select optimal media source based on viewport width for mobile, tablet, and desktop breakpoints
- [Type Reference](https://usertourkit.com/docs/media/types): TypeScript types for MediaSource, EmbedConfig, MediaProvider, PlaybackState, and the full @tour-kit/media API surface
- [Embed URLs](https://usertourkit.com/docs/media/utilities/embed-urls): Embed URL builders: construct privacy-compliant iframe src URLs for YouTube, Vimeo, Loom, and Wistia with custom parameters
- [URL Parsing](https://usertourkit.com/docs/media/utilities/url-parsing): URL parsing utilities: detect video platform, extract video IDs, and validate media URLs from YouTube, Vimeo, and Loom

## Scheduling

- [@tour-kit/scheduling](https://usertourkit.com/docs/scheduling): Time-based scheduling for controlling when tours, announcements, and content appear — business hours, dates, and timezones
- [Components](https://usertourkit.com/docs/scheduling/components): ScheduleGate component for the @tour-kit/scheduling package — pro license enforcement wrapper for scheduled content
- [Scheduling Hooks](https://usertourkit.com/docs/scheduling/hooks): React hooks for reactive schedule evaluation: check active state, get next window, and detect user timezone automatically
- [useSchedule](https://usertourkit.com/docs/scheduling/hooks/use-schedule): useSchedule hook: evaluate whether a schedule is currently active with automatic refresh and timezone-aware calculations
- [useScheduleStatus](https://usertourkit.com/docs/scheduling/hooks/use-schedule-status): useScheduleStatus hook: get detailed schedule information including next active window, time remaining, and status reason
- [useUserTimezone](https://usertourkit.com/docs/scheduling/hooks/use-user-timezone): useUserTimezone hook: detect the user browser timezone via Intl API for timezone-aware schedule evaluation in React apps
- [Presets](https://usertourkit.com/docs/scheduling/presets): Schedule presets: pre-configured constants for business hours, weekdays, weekends, and common scheduling patterns in userTourKit
- [Types Reference](https://usertourkit.com/docs/scheduling/types): TypeScript types for ScheduleConfig, TimeRange, DateRange, BlackoutPeriod, RecurrenceRule, and the scheduling API surface
- [Scheduling Utilities](https://usertourkit.com/docs/scheduling/utilities): Pure scheduling functions: evaluate schedules, check business hours, handle blackouts, and convert timezones without React
- [Blackout Utilities](https://usertourkit.com/docs/scheduling/utilities/blackouts): Blackout period utilities: define maintenance windows, holidays, and exclusion dates when content should not be displayed
- [Business Hours Utilities](https://usertourkit.com/docs/scheduling/utilities/business-hours): Business hours utilities: restrict content to work hours with timezone support, holiday calendars, and custom day schedules
- [Date Range Utilities](https://usertourkit.com/docs/scheduling/utilities/date-range): Date range utilities: check if a date falls within start/end bounds with inclusive/exclusive boundary option support
- [Day of Week Utilities](https://usertourkit.com/docs/scheduling/utilities/day-of-week): Day-of-week utilities: filter schedules by weekday with locale-aware day names and configurable week start day support
- [Recurring Pattern Utilities](https://usertourkit.com/docs/scheduling/utilities/recurring): Recurring schedule utilities: match daily, weekly, monthly, and custom recurrence patterns for periodic content display
- [Schedule Evaluation](https://usertourkit.com/docs/scheduling/utilities/schedule-evaluation): evaluateSchedule function: check if the current time matches a schedule config with date ranges, time windows, and blackouts
- [Time Range Utilities](https://usertourkit.com/docs/scheduling/utilities/time-range): Time range utilities: check if the current time falls within daily time windows for business hours and display schedules
- [Timezone Utilities](https://usertourkit.com/docs/scheduling/utilities/timezone): Timezone utilities: detect browser timezone, validate IANA identifiers, convert between zones, and normalize UTC offsets

## AI

- [@tour-kit/ai](https://usertourkit.com/docs/ai): AI-powered chat assistant for product tours — context-aware conversation with RAG and CAG documentation retrieval modes
- [API Reference](https://usertourkit.com/docs/ai/api-reference): Complete API reference for @tour-kit/ai: client hooks, server utilities, chat components, and configuration types
- [CAG Guide](https://usertourkit.com/docs/ai/cag-guide): Context-Augmented Generation guide: inject tour documentation directly into AI prompts for fast, deterministic responses
- [Components](https://usertourkit.com/docs/ai/components): Pre-built AI chat components: AiChatPanel, AiChatToggle, AiChatMessageList, and AiChatInput with shadcn/ui styling
- [Hooks](https://usertourkit.com/docs/ai/hooks): React hooks for @tour-kit/ai — useAiChat, useAiChatContext, useSuggestions/useOptionalSuggestions, useTourAssistant
- [Quick Start](https://usertourkit.com/docs/ai/quick-start): Set up @tour-kit/ai in under 5 minutes: install the package, configure your AI provider, and add the chat widget to React
- [RAG Guide](https://usertourkit.com/docs/ai/rag-guide): Retrieval-Augmented Generation guide: use vector search over documentation for scalable AI chat with large content sets
- [Tour Integration](https://usertourkit.com/docs/ai/tour-integration): Connect AI chat to active tour state: context-aware assistance that knows the current step, tour progress, and user actions

## Guides

- [Guides](https://usertourkit.com/docs/guides): In-depth guides for accessibility, persistence, animations, router integration, and framework-specific userTourKit setup
- [Accessibility](https://usertourkit.com/docs/guides/accessibility): Configure keyboard navigation, focus trapping, screen reader support, and reduced motion for WCAG 2.1 AA compliant tours
- [Adoption Analytics](https://usertourkit.com/docs/guides/adoption-analytics): Combine @tour-kit/adoption and @tour-kit/analytics to measure feature discovery rates and optimize onboarding funnels
- [Analytics Integration](https://usertourkit.com/docs/guides/analytics-integration): Connect @tour-kit/analytics to tours, hints, checklists, and adoption events with Mixpanel, PostHog, or custom plugins
- [Animations](https://usertourkit.com/docs/guides/animations): Add CSS transitions and animations to tour steps, respect prefers-reduced-motion, and create smooth step transitions
- [Time-Based Announcements](https://usertourkit.com/docs/guides/announcements-scheduling): Schedule announcements with @tour-kit/scheduling for time-based delivery, business hours, and recurring content windows
- [Base UI Support](https://usertourkit.com/docs/guides/base-ui): Switch from Radix UI to Base UI for tour components using the UnifiedSlot abstraction and UILibraryContext provider
- [Branching Tours](https://usertourkit.com/docs/guides/branching): Create personalized tour paths with conditional branching, user choice flows, and dynamic step insertion based on state
- [Checklists with Tours](https://usertourkit.com/docs/guides/checklists-tours): Link checklists to tours for guided onboarding — auto-complete tasks on tour finish and track user progress together
- [Hidden Steps](https://usertourkit.com/docs/guides/hidden-steps): Run branching logic, trait forks, and completion gates without mounting any UI by marking a step as hidden.
- [Internationalization (i18n)](https://usertourkit.com/docs/guides/i18n): Translate every string in Tour Kit with LocaleProvider, useT(), and the {{var | fallback}} interpolation grammar.
- [Imperative control](https://usertourkit.com/docs/guides/imperative-control): Control tours from sibling subtrees with useTourActions, and bypass announcement gates with forceShow for admin previews.
- [Multi-tab Tours](https://usertourkit.com/docs/guides/multi-tab): Pause an active tour in tab B when the user starts the same flow in tab A — cross-tab coordination via BroadcastChannel.
- [Next.js Integration](https://usertourkit.com/docs/guides/nextjs): Set up userTourKit with Next.js App Router or Pages Router — server component layouts, route-aware tours, and SSR support
- [Persistence](https://usertourkit.com/docs/guides/persistence): Save tour progress, checklist completion, and hint dismissals across browser sessions with pluggable storage adapters
- [Playwright](https://usertourkit.com/docs/guides/playwright): Drive Tour Kit from Playwright with the typed `test.extend({ tour })` fixture and the opt-in `window.__tourKit__` bridge.
- [Reduced Motion](https://usertourkit.com/docs/guides/reduced-motion): How Tour Kit honors prefers-reduced-motion across announcements, surveys, hints, checklists, and the core tour runtime
- [Router Integration](https://usertourkit.com/docs/guides/router-integration): Build multi-page tours with Next.js, React Router, or custom routers using route-aware step targeting and persistence
- [Audience Segmentation](https://usertourkit.com/docs/guides/segmentation): Target tours, hints, surveys, and announcements at named user segments using SegmentationProvider, useSegment, and CSV-driven user lists.
- [Testing with React Testing Library](https://usertourkit.com/docs/guides/testing): Test Tour Kit components with React Testing Library and Vitest under jsdom using @tour-kit/testing-library — zero consumer-side act() boilerplate.
- [Theme Variations](https://usertourkit.com/docs/guides/theme-variations): Resolve tour themes by system colour scheme, explicit mode, route, or arbitrary trait predicates with `<ThemeProvider>` and `useThemeVariation`.
- [Troubleshooting](https://usertourkit.com/docs/guides/troubleshooting): Diagnose and fix common userTourKit issues: missing targets, positioning glitches, hydration errors, and focus trap problems
- [Unified Slot (Radix UI + Base UI)](https://usertourkit.com/docs/guides/unified-slot): Single composition primitive that supports both Radix UI's asChild element cloning and Base UI's render-prop style — covers UnifiedSlot, UILibrary, UILibraryProvider, and the RenderProp shape
- [Vite Integration](https://usertourkit.com/docs/guides/vite): Configure userTourKit in Vite + React projects with hot module replacement, path aliases, and production build optimization

## Examples

- [Examples](https://usertourkit.com/docs/examples): Copy-paste examples for common userTourKit patterns: basic tours, onboarding flows, and fully custom headless interfaces
- [Basic Tour](https://usertourkit.com/docs/examples/basic-tour): Build a 3-step product tour with spotlight overlay, keyboard navigation, and progress indicators — full working code
- [Cross-page Tour](https://usertourkit.com/docs/examples/cross-page-tour): Build a multi-page tour that navigates from /dashboard to /billing and resumes on the right URL after a hard refresh, using the Next.js App Router.
- [Dashboard (full integration)](https://usertourkit.com/docs/examples/dashboard): Reference example exercising every @tour-kit/* package in one Next.js 16 + React 19 + Tailwind v4 + shadcn/ui app.
- [Headless Custom UI](https://usertourkit.com/docs/examples/headless-custom): Build a completely custom tour UI with headless components, render props, and your own design system or CSS framework
- [Onboarding Flow](https://usertourkit.com/docs/examples/onboarding-flow): Complete user onboarding flow with persistent progress, conditional steps, checklists, and tour completion callbacks
- [Progress Variants](https://usertourkit.com/docs/examples/progress-variants): Render every TourProgress variant — text, narrow, bar, chain, dots, numbered, none — with accessible roles and reduced-motion-friendly transitions

## API Reference

- [API Reference](https://usertourkit.com/docs/api): Complete API reference for all userTourKit packages — hooks, components, providers, utilities, and TypeScript type exports
- [@tour-kit/adoption API](https://usertourkit.com/docs/api/adoption): API reference for @tour-kit/adoption: AdoptionProvider, useFeature, useNudge, useAdoptionStats, and dashboard exports
- [@tour-kit/ai API](https://usertourkit.com/docs/api/ai): Complete API reference for @tour-kit/ai — providers, hooks, components, variants, and server-side route + RAG helpers
- [@tour-kit/analytics API](https://usertourkit.com/docs/api/analytics): API reference for @tour-kit/analytics: AnalyticsProvider, useAnalytics, plugin interface, and built-in integrations
- [@tour-kit/announcements API](https://usertourkit.com/docs/api/announcements): API reference for @tour-kit/announcements: Modal, Toast, Banner, Slideout, Spotlight, queue hooks, and provider config
- [@tour-kit/checklists API](https://usertourkit.com/docs/api/checklists): API reference for @tour-kit/checklists: Checklist, ChecklistTask, useChecklist, useTask, and progress utilities
- [@tour-kit/core API](https://usertourkit.com/docs/api/core): API reference for @tour-kit/core: useTour, useStep, useFocusTrap, createTour, createStep, and all utility exports
- [@tour-kit/hints API](https://usertourkit.com/docs/api/hints): API reference for @tour-kit/hints: Hint, HintHotspot, HintTooltip, useHints, useHint, and headless hint primitives
- [@tour-kit/license API](https://usertourkit.com/docs/api/license): API reference for @tour-kit/license: LicenseProvider, LicenseGate, ProGate, useLicense, useIsPro, useLicenseGate, validateLicenseKey, and related types
- [@tour-kit/media API](https://usertourkit.com/docs/api/media): API reference for @tour-kit/media: YouTubeEmbed, VimeoEmbed, LoomEmbed, GifPlayer, LottiePlayer, and TourMedia
- [@tour-kit/react API](https://usertourkit.com/docs/api/react): API reference for @tour-kit/react: Tour, TourCard, TourStep, headless components, router adapters, and style hooks
- [@tour-kit/scheduling API](https://usertourkit.com/docs/api/scheduling): API reference for @tour-kit/scheduling: useSchedule, evaluateSchedule, timezone utilities, and preset configurations

## Build with LLMs

- [Build with LLMs](https://usertourkit.com/docs/build-with-llms): Use Claude Code, ChatGPT, Cursor, and other LLM coding assistants to build with userTourKit faster — Claude Code plugin, llms.txt, per-package context files, and MCP.

## Codemods

- [Codemods](https://usertourkit.com/docs/codemods): Automated jscodeshift codemods to migrate from React Joyride, Shepherd.js, and Driver.js to Tour Kit using the tour-kit-migrate CLI.
- [from-driver](https://usertourkit.com/docs/codemods/from-driver): Migrate a Driver.js v1+ codebase to Tour Kit with the tour-kit-migrate --from driver codemod.
- [from-joyride](https://usertourkit.com/docs/codemods/from-joyride): Migrate a React Joyride v2 codebase to Tour Kit with the tour-kit-migrate --from joyride codemod.
- [from-shepherd](https://usertourkit.com/docs/codemods/from-shepherd): Migrate a Shepherd.js v10+ codebase to Tour Kit with the tour-kit-migrate --from shepherd codemod.

## Index

- [Tour Kit Docs — React Onboarding Library](https://usertourkit.com/docs/index): Documentation for userTourKit — install, configure, and build accessible product tours, hints, and onboarding flows in React with shadcn/ui and TypeScript-strict types.

## Licensing

- [Licensing](https://usertourkit.com/docs/licensing): Set up userTourKit Pro licensing with Polar.sh — installation, configuration, and CI/CD
- [Trial countdown & test mode](https://usertourkit.com/docs/licensing/trial): Client-derived trial state, the <TrialBadge> surface, and how to simulate license failure on real domains.

## Migration

- [Migrate from driver.js](https://usertourkit.com/docs/migration/driver): Use `npx tour-kit-migrate --from driver` to rewrite a driver.js codebase to Tour Kit in seconds. Covers the function-call pattern (`driver({...}).drive()`).
- [Migrate from react-joyride](https://usertourkit.com/docs/migration/joyride): Use `npx tour-kit-migrate --from joyride` to rewrite a react-joyride codebase to Tour Kit in seconds. Covers both the legacy `<Joyride>` JSX form and the modern `useJoyride()` hook form.
- [Migrate from shepherd.js](https://usertourkit.com/docs/migration/shepherd): Use `npx tour-kit-migrate --from shepherd` to rewrite a shepherd.js codebase to Tour Kit in seconds. Covers the class-chain pattern (`new Shepherd.Tour` + `.addStep(...)` + `.start()`).

## Surveys

- [@tour-kit/surveys](https://usertourkit.com/docs/surveys): In-app microsurveys: NPS, CSAT, CES, and custom question flows with fatigue prevention, skip logic, and five display modes for React apps
- [Components](https://usertourkit.com/docs/surveys/components): Pre-styled display and question components: five survey containers and four accessible question input types with CVA variant support
- [QuestionBoolean](https://usertourkit.com/docs/surveys/components/question-boolean): Yes / No toggle pair implemented as an accessible radiogroup with configurable labels, size variants, and roving tabindex
- [QuestionMedia](https://usertourkit.com/docs/surveys/components/question-media): Render <MediaSlot> above a question when the question has a `media?` field. No-op for questions without media, so consumers can mount it unconditionally.
- [QuestionRating](https://usertourkit.com/docs/surveys/components/question-rating): Numeric, star, or emoji rating scale implemented as an accessible radiogroup with roving tabindex and configurable min/max
- [QuestionSelect](https://usertourkit.com/docs/surveys/components/question-select): Single-select (radiogroup) or multi-select (group of checkboxes) option list with roving tabindex, disabled option support, and size variants
- [QuestionText](https://usertourkit.com/docs/surveys/components/question-text): Single-line input or resizable textarea with optional character count, size variants, and autofocus support
- [SurveyBanner](https://usertourkit.com/docs/surveys/components/survey-banner): Top or bottom strip that renders when the survey is visible, with sticky positioning, intent variants, and an optional dismiss button
- [SurveyInline](https://usertourkit.com/docs/surveys/components/survey-inline): Embeds a survey directly in the page flow, rendering when the survey is visible with an optional alwaysRender flag for preview scenarios
- [SurveyModal](https://usertourkit.com/docs/surveys/components/survey-modal): Centered dialog that shows when the survey's isVisible flag is true, built on Radix UI Dialog with configurable size and dismiss behaviour
- [SurveyPopover](https://usertourkit.com/docs/surveys/components/survey-popover): Floating panel anchored to a DOM element via Floating UI, with automatic flip and shift collision avoidance
- [SurveyProgress](https://usertourkit.com/docs/surveys/components/survey-progress): Question progress indicator with text, bar, or combined display — uses role="progressbar" and renders null for single-question surveys
- [SurveySlideout](https://usertourkit.com/docs/surveys/components/survey-slideout): Side panel that slides in from the left or right edge, built on Radix UI Dialog with configurable position and size variants
- [Turnkey Survey Modals](https://usertourkit.com/docs/surveys/components/turnkey-modals): CsatModal, NpsModal, and CesModal — two-prop wrappers around SurveyModal + QuestionRating with built-in scoring categories.
- [Headless](https://usertourkit.com/docs/surveys/headless): Render-prop components that supply survey state and ARIA props without rendering any markup — full control over appearance and interaction
- [HeadlessQuestionBoolean](https://usertourkit.com/docs/surveys/headless/headless-question-boolean): Headless yes/no toggle — manages boolean state and returns groupProps and getOptionProps for accessible yes/no buttons
- [HeadlessQuestionRating](https://usertourkit.com/docs/surveys/headless/headless-question-rating): Headless rating scale — manages value, options array, focusedIndex, and returns pre-built ARIA props via render prop
- [HeadlessQuestionSelect](https://usertourkit.com/docs/surveys/headless/headless-question-select): Headless select — manages single or multi-select state and returns groupProps and getOptionProps with correct ARIA roles for each mode
- [HeadlessQuestionText](https://usertourkit.com/docs/surveys/headless/headless-question-text): Headless text input — manages value, character count, and returns pre-built inputProps and characterCountProps via render prop
- [HeadlessSurvey](https://usertourkit.com/docs/surveys/headless/headless-survey): Render-prop wrapper around useSurvey — exposes full survey state and actions without rendering any DOM elements
- [useSurvey](https://usertourkit.com/docs/surveys/hooks/use-survey): Access and control a single survey by id — show, hide, dismiss, snooze, answer questions, and navigate between steps
- [useSurveyScoring](https://usertourkit.com/docs/surveys/hooks/use-survey-scoring): Access NPS, CSAT, and CES scoring utilities plus a getSurveyScore helper that automatically selects the right algorithm for a completed survey
- [useSurveys](https://usertourkit.com/docs/surveys/hooks/use-surveys): Access the full SurveysContextValue — all survey states, the active survey, the queue, and every action available in the context
- [Providers](https://usertourkit.com/docs/surveys/providers): SurveysProvider and useSurveysContext — the root of the surveys state tree
- [SurveysProvider](https://usertourkit.com/docs/surveys/providers/surveys-provider): Root provider that manages survey state, fatigue prevention, persistence, and analytics callbacks for all surveys in your application
- [Types](https://usertourkit.com/docs/surveys/types): TypeScript type definitions exported by @tour-kit/surveys — survey config, question config, scoring results, context, events, queue, and position types
- [Utilities](https://usertourkit.com/docs/surveys/utilities): Standalone scoring functions — calculateNPS, calculateCSAT, calculateCES — that work in React components, server actions, and analytics pipelines
- [calculateCES](https://usertourkit.com/docs/surveys/utilities/calculate-ces): Calculate Customer Effort Score as the average of 1–7 ratings, with easy, difficult, and neutral counts based on fixed thresholds
- [calculateCSAT](https://usertourkit.com/docs/surveys/utilities/calculate-csat): Calculate Customer Satisfaction Score as the percentage of responses at or above a configurable threshold value
- [calculateNPS](https://usertourkit.com/docs/surveys/utilities/calculate-nps): Calculate Net Promoter Score from an array of 0–10 ratings, returning score, promoter/passive/detractor counts, and percentages

## Testing library

- [Testing Library](https://usertourkit.com/docs/testing-library): Tour Kit's test helpers for Vitest, Jest, and React Testing Library.
- [Recipes](https://usertourkit.com/docs/testing-library/recipes): Copy-paste test patterns for Tour Kit.

## Troubleshooting

- [Troubleshooting](https://usertourkit.com/docs/troubleshooting): Common integration issues with Tour Kit and how to fix them.

## Use cases

- [Use Cases](https://usertourkit.com/docs/use-cases): Practical Tour Kit use cases: SaaS onboarding, feature announcements, contextual help, and product-led growth patterns for React apps
- [Feature Announcements](https://usertourkit.com/docs/use-cases/feature-announcements): Announce new features to existing React app users with Tour Kit. Use announcements, hints, and spotlight variants without shipping a sprint.
- [SaaS Onboarding](https://usertourkit.com/docs/use-cases/saas-onboarding): Ship a headless first-run onboarding tour in a React SaaS app. Use Tour Kit hooks, checklists, and analytics to get new users to their activation event.

## Pillar Articles (Blog)

- [Headless onboarding: what it means, why it matters, and how to start](https://usertourkit.com/blog/headless-onboarding-explained): What headless onboarding is, why it beats styled tour libraries for design system teams, and how to implement it with code examples.
- [Onboarding metrics explained: every KPI with formulas (2026)](https://usertourkit.com/blog/onboarding-metrics-explained): Master every onboarding KPI from activation rate to NPS. Each metric includes the formula, benchmark data, and React tracking code.
- [Onboarding software: every tool, library, and platform compared (2026)](https://usertourkit.com/blog/onboarding-software-comparison-hub): Compare 25+ onboarding tools across enterprise DAPs, mid-market SaaS, and open-source libraries. Pricing, bundle sizes, and decision framework included.
- [The open-source onboarding stack: build your own with code](https://usertourkit.com/blog/open-source-onboarding-stack): Assemble a code-first onboarding stack from open-source tools. Compare tour libraries, analytics, and surveys to own your onboarding.
- [Product tour best practices for React developers (2026)](https://usertourkit.com/blog/product-tour-best-practices-react): 14 product tour best practices for React. Code examples, accessibility, state management, and performance from real implementations.
- [Product tours: the complete 2026 guide for developers](https://usertourkit.com/blog/product-tour-guide-2026): Learn what product tours are, how they work, and how to build them in React. Tour types, completion benchmarks, accessibility, and code examples.
- [Tour Kit vs everything: the complete comparison index (2026)](https://usertourkit.com/blog/tour-kit-comparison-index): Compare Tour Kit against every product tour library and SaaS platform. Head-to-head benchmarks, migration guides, and pricing breakdowns in one place.
- [Tour Kit documentation hub: guides, tutorials, and API reference](https://usertourkit.com/blog/tour-kit-documentation-hub): Navigate Tour Kit's complete documentation. Find guides, API references, tutorials, and examples for all 10 packages across the React product tour library.
- [User onboarding: the developers complete handbook (2026)](https://usertourkit.com/blog/user-onboarding-handbook): A code-first guide to user onboarding covering patterns, metrics, accessibility, and implementation with working React examples and real benchmark data.

## Comparisons

- [userTourKit vs Appcues](https://usertourkit.com/compare/tour-kit-vs-appcues): Compare userTourKit vs Appcues for product onboarding. $99 one-time vs $300+/month. See features, pricing, and developer experience side-by-side in 2026.
- [userTourKit vs Chameleon](https://usertourkit.com/compare/tour-kit-vs-chameleon): Compare userTourKit vs Chameleon for product onboarding. See features, pricing, and developer experience side-by-side in 2026.
- [userTourKit vs Driver.js](https://usertourkit.com/compare/tour-kit-vs-driver-js): Compare userTourKit vs Driver.js for product tours. See features, bundle size, React integration, and accessibility side-by-side in 2026.
- [userTourKit vs Intro.js](https://usertourkit.com/compare/tour-kit-vs-intro-js): Compare userTourKit vs Intro.js for product tours and onboarding. See features, bundle size, licensing, and accessibility side-by-side in 2026.
- [userTourKit vs OnboardJS](https://usertourkit.com/compare/tour-kit-vs-onboardjs): Compare userTourKit vs OnboardJS for headless product tours. See features, visual components, and TypeScript support side-by-side in 2026.
- [userTourKit vs Onborda](https://usertourkit.com/compare/tour-kit-vs-onborda): Compare userTourKit vs Onborda for Next.js product tours. See features, framework support, and compatibility side-by-side in 2026.
- [userTourKit vs React Joyride](https://usertourkit.com/compare/tour-kit-vs-react-joyride): Compare userTourKit vs React Joyride: features, bundle size, pricing, and accessibility side-by-side. Find which fits your React stack in 2026.
- [userTourKit vs Reactour](https://usertourkit.com/compare/tour-kit-vs-reactour): Compare userTourKit vs Reactour for React product tours. See features, bundle size, pricing, accessibility, and TypeScript side-by-side in 2026.
- [userTourKit vs Shepherd.js](https://usertourkit.com/compare/tour-kit-vs-shepherd-js): Switching from Shepherd.js? Compare userTourKit vs Shepherd.js: bundle size, licensing (AGPL vs MIT), React fit, and migration path. Find the right alternative for your stack in 2026.
- [userTourKit vs Userflow](https://usertourkit.com/compare/tour-kit-vs-userflow): Compare userTourKit vs Userflow for product onboarding. See features, pricing, flow builder, and developer experience side-by-side in 2026.
- [userTourKit vs UserGuiding](https://usertourkit.com/compare/tour-kit-vs-userguiding): Compare userTourKit vs UserGuiding for product onboarding. See features, pricing, customization, and developer control side-by-side in 2026.
- [userTourKit vs Userpilot](https://usertourkit.com/compare/tour-kit-vs-userpilot): Compare userTourKit vs Userpilot for product onboarding. See features, pricing, analytics, and developer experience side-by-side in 2026.
- [userTourKit vs WalkMe](https://usertourkit.com/compare/tour-kit-vs-walkme): Compare userTourKit vs WalkMe for digital adoption. See features, pricing, performance, and implementation complexity side-by-side in 2026.

## Alternatives

- [Intro.js alternatives](https://usertourkit.com/alternatives/intro-js-alternatives): The best Intro.js alternatives in 2026. Compare userTourKit, Shepherd.js, Driver.js, and more. Ranked by license, features, and DX.
- [React Joyride alternatives](https://usertourkit.com/alternatives/react-joyride-alternatives): The best React Joyride alternatives in 2026. Compare userTourKit, Shepherd.js, Driver.js, and more. Ranked by bundle size, features, and DX.
- [Shepherd.js alternatives](https://usertourkit.com/alternatives/shepherd-js-alternatives): The best Shepherd.js alternatives in 2026. Compare userTourKit, React Joyride, Driver.js, and more. Ranked by license, features, and DX.

## About & Editorial

- [About userTourKit](https://usertourkit.com/about): About page with maintainer bio (Dominique Degottex / domidex01), verifiable external profiles, and Person schema.
- [Editorial Policy](https://usertourkit.com/editorial-policy): How userTourKit content is produced, reviewed, sourced, corrected, and disclosed — including AI-assistance disclosure.
- [How We Test](https://usertourkit.com/how-we-test): Methodology behind benchmarks, bundle-size claims, accessibility scores, and comparison data. CI gates, manual verification, reproducibility.
- [Benchmarks](https://usertourkit.com/benchmarks): Reproducible benchmarks comparing userTourKit against other React product tour libraries. Published methodology, timestamped snapshots, linked sources.
- [Bundle Size Benchmark](https://usertourkit.com/benchmarks/bundle-size): Gzipped + minified production-build sizes for userTourKit, React Joyride, Shepherd.js, Driver.js, Intro.js, Onborda, and Reactour. Sourced from bundlephobia.