Getting Started
Set up userTourKit in your React application with step-by-step installation, configuration, and TypeScript guides
userTourKit is a headless onboarding and product tour library for React. It's designed to work well with shadcn/ui and similar component libraries.
Still weighing whether to build tours in-house or adopt a library? Our React product tour best practices guide walks through the architectural trade-offs, and the open-source onboarding stack pillar surveys every viable tool before you commit to one.
Overview
userTourKit provides a flexible foundation for building:
- Product Tours - Guide users through your application with step-by-step tours
- Hints & Hotspots - Highlight features with persistent hints
- Announcements - Display modals, banners, toasts, and more
Next Steps
- Installation - Install userTourKit packages
- Quick Start - Build your first tour
- TypeScript - TypeScript configuration
Coming from another library?
If you already have tours written in another library, the tour-kit-migrate codemod will rewrite them automatically:
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.
Tour Kit Docs — React Onboarding Library
Documentation for userTourKit — install, configure, and build accessible product tours, hints, and onboarding flows in React with shadcn/ui and TypeScript-strict types.
Installation
Install @tour-kit/core and @tour-kit/react with npm, pnpm, yarn, or bun and configure peer dependencies for React 18+