TourKit
User Tour Kit is a headless, accessible product tour library for React with shadcn/ui support and full TypeScript coverage
TourKit
A headless, accessible, and beautifully styled product tour library for React. Works seamlessly with shadcn/ui and Tailwind CSS.
Why TourKit?
Headless First
All logic in hooks. Build your own UI or use our pre-styled components.
Accessible
WCAG 2.1 AA compliant. Focus management, keyboard nav, screen reader support.
TypeScript
Full type safety with comprehensive type definitions.
Tiny Bundle
Core is under 8KB gzipped. Tree-shakeable exports.
Packages
| Package | Description | Size |
|---|---|---|
@tour-kit/core | Headless hooks & logic | < 8KB |
@tour-kit/react | Pre-styled React components | < 12KB |
@tour-kit/hints | Persistent hints/hotspots | < 5KB |
Quick Start
pnpm add @tour-kit/reactimport { Tour, TourStep, useTour } from '@tour-kit/react';
function App() {
const { start } = useTour('onboarding');
return (
<Tour id="onboarding">
<TourStep
target="#welcome"
title="Welcome!"
content="Let's take a quick tour."
placement="bottom"
/>
<button onClick={() => start()}>Start Tour</button>
<div id="welcome">Welcome Section</div>
</Tour>
);
}