@tour-kit/react
@tour-kit/react
Pre-styled React components for product tours with compound component patterns, asChild slot, and shadcn/ui compatibility
domidex01Published
LLM Context File
Working with an AI assistant? Download the context file for @tour-kit/react and paste it into your conversation for accurate code generation.
Why userTourKit for product tours →
Pre-built, accessible components styled with Tailwind CSS. For hydration-safe patterns, conditional steps, and analytics integration specific to React, see our React product tour best practices pillar article.
Installation
pnpm add @tour-kit/reactComponents
- Tour - Main tour wrapper
- TourStep - Step definition (see also the
targetprop deep-dive) - TourCard - Tooltip card
- TourOverlay - Spotlight overlay
- TourNavigation - Next/prev buttons
- TourProgress - Progress indicator
- TourClose - Skip / complete button
- TourRoutePrompt - Multi-page navigation prompt
Related
@tour-kit/reactAPI reference — full export surface in one page.@tour-kit/core— the framework-agnostic primitives this package re-exports.- Headless components — render-prop primitives for fully custom UI.
- Styling — Tailwind, CSS variables, and custom components.
- Router adapters — multi-page tours with Next.js or React Router.
- Quick start — minimal working app.
Ship onboarding, not config.
npm i @tour-kit/core is MIT and free. The Pro packages work unlicensed too — a one-time $99 license removes the production watermark when you ship.
MIT-licensed — no signup, no credit card. Pay once, only when you ship.