(\n \n
{currentStep?.title}
\n \n \n \n )}\n/>\n```\n\nAvailable headless components:\n\n- `TourCardHeadless`\n- `TourNavigationHeadless`\n- `TourProgressHeadless`\n- `TourOverlayHeadless`\n- `TourCloseHeadless`\n\n## Router adapters\n\nEach framework has a **factory** (testable, dependency-injected) and a **direct hook** (convenient):\n\n```tsx\nimport { useNextAppRouter, TourProvider } from '@tour-kit/react'\n\nfunction App() {\n const router = useNextAppRouter()\n return (\n \n \n \n )\n}\n```\n\n| Framework | Hook | Factory |\n|---|---|---|\n| Next.js App Router | `useNextAppRouter()` | `createNextAppRouterAdapter(usePathname, useRouter)` |\n| Next.js Pages Router | `useNextPagesRouter()` | `createNextPagesRouterAdapter(useRouter)` |\n| React Router v6 / v7 | `useReactRouter()` | `createReactRouterAdapter(useLocation, useNavigate)` |\n\n> Direct hooks call dynamic `require()` for the framework — they throw if the framework isn't installed. Factories accept your own router primitives so tests don't need the framework as a dependency.\n\n## Lazy / code-split entry\n\n```tsx\nimport { Suspense } from 'react'\nimport { LazyTour, LazyTourStep } from '@tour-kit/react/lazy'\n\n\n \n \n \n\n```\n\n## API Reference\n\n### Tour components\n\n| Export | Purpose |\n|---|---|\n| `Tour` | Tour wrapper that registers steps declaratively |\n| `TourStep` | Single step (target, title, content, placement) |\n| `TourCard`, `TourCardHeader`, `TourCardContent`, `TourCardFooter` | Composable step card |\n| `TourNavigation`, `TourProgress`, `TourClose` | Footer controls |\n| `TourOverlay` | Spotlight overlay |\n| `TourPortal`, `TourArrow` | Low-level primitives |\n| `TourRoutePrompt` | Multi-page route confirmation prompt |\n| `MultiTourKitProvider` | Registers many tours; trigger by id with `useTours()` |\n\n### Variants (CVA)\n\nFor styling customization, every component exposes its `class-variance-authority` config:\n\n```ts\nimport {\n tourButtonVariants,\n tourCardVariants,\n tourCardHeaderVariants,\n tourCardContentVariants,\n tourCardFooterVariants,\n tourProgressVariants,\n tourProgressDotVariants,\n tourOverlayVariants,\n} from '@tour-kit/react'\n```\n\n### Hooks (own)\n\n| Hook | Description |\n|---|---|\n| `useTours()` | Multi-tour registry consumer |\n| `useTourRoute()` | Current route info from the active adapter |\n\n### Hooks (re-exported from `@tour-kit/core`)\n\n`useTour`, `useStep`, `useSpotlight`, `useElementPosition`, `useKeyboardNavigation`, `useFocusTrap`, `usePersistence`, `useRoutePersistence`, `useMediaQuery`, `usePrefersReducedMotion`, `useBranch`, `useUILibrary`.\n\n### Utilities (re-exported)\n\n`createTour`, `createStep`, `waitForElement`, `isElementVisible`, `getScrollParent`, `scrollIntoView`, `generateId`, `announce`, `prefersReducedMotion`, `getStepAnnouncement`, `createStorageAdapter`, `createPrefixedStorage`, `safeJSONParse`, `calculatePosition`, `cn`.\n\n### Slot & UI library\n\n```ts\nimport {\n Slot, Slottable, // Radix UI primitives\n UnifiedSlot, // Reconciles Radix + Base UI render-prop styles\n UILibraryProvider, // Switch to Base UI\n useUILibrary,\n} from '@tour-kit/react'\n```\n\n### Types\n\nRe-exported from core. **Note the rename:** `TourStep` and `Tour` *components* shadow the type names from core, so types come through as `TourStepConfig` and `TourConfig`.\n\n```ts\nimport type {\n TourConfig, TourStepConfig, TourState, TourCallbackContext,\n Placement, KeyboardConfig, SpotlightConfig, PersistenceConfig,\n RouterAdapter, MultiPagePersistenceConfig,\n Branch, BranchTarget, UseBranchReturn,\n UseTourReturn, UseStepReturn, UseSpotlightReturn,\n UseFocusTrapReturn, UsePersistenceReturn, UseRoutePersistenceReturn,\n} from '@tour-kit/react'\n```\n\n## Single import surface\n\nAlways import from `@tour-kit/react`. Do **not** mix `@tour-kit/core` and `@tour-kit/react` imports in the same file — react re-exports nearly the full core surface to keep your imports flat.\n\n## Step media is lazy-loaded\n\n`TourCard` renders step `media` through `@tour-kit/media`, but loads it with\n`React.lazy` — bundlers split it into its own async chunk that is only fetched\nthe first time a step with `media` renders. Tours without media steps never\nship the media stack in their initial bundle. No setup needed; the embed\nmounts one tick after the card (wrapped in ``).\n\n## Related packages\n\n- [`@tour-kit/core`](https://www.npmjs.com/package/@tour-kit/core) — headless engine (re-exported here)\n- [`@tour-kit/hints`](https://www.npmjs.com/package/@tour-kit/hints) — persistent hints, hotspots, beacons\n- [`@tour-kit/checklists`](https://www.npmjs.com/package/@tour-kit/checklists) — onboarding checklists\n- [`@tour-kit/announcements`](https://www.npmjs.com/package/@tour-kit/announcements) — modal / toast / banner / slideout announcements\n- [`@tour-kit/analytics`](https://www.npmjs.com/package/@tour-kit/analytics) — PostHog, Mixpanel, Amplitude, GA4 plugins\n\n## Documentation\n\nFull documentation: [https://usertourkit.com/docs/react](https://usertourkit.com/docs/react)\n\nSee [Troubleshooting](https://usertourkit.com/docs/troubleshooting) for React 19 / Next 16 caveats.\n\n## Licence\n\n[Business Source License 1.1](./LICENSE.md). Development, evaluation, testing,\nCI and any non-production environment are free and need no key. **Production\nuse needs a licence key** — a one-time purchase from $9.99 at\n[usertourkit.com/pricing](https://usertourkit.com/pricing). Each version\nconverts to MIT on its Change Date, four years after release.\n\nVersions up to and including 2.1.0 were published under MIT and stay MIT — an\nMIT grant cannot be withdrawn. This applies from 3.0.0 onward.\n\n© 2026 domidex01\n","readmeFilename":"README.md"}