Skip to main content

Live demo

Try Tour Kit in your browser

A working React product tour over a mock SaaS dashboard. Click Start interactive tour, then use Tab, Shift+Tab, and Esc to verify focus trap and keyboard navigation. The demo is built entirely with the free MIT-licensed packages — no signup, no install, no paid tier.

Interactive playground

No signup. Free packages only (@tour-kit/core + @tour-kit/react + @tour-kit/hints).
Acme Dashboard
v2.4.1
Revenue
$48,210
+12.4%
Active users
3,219
+4.1%
Churn
1.8%
+0.2%
Recent activity
CustomerPlanStatus
Linear Inc.ProActive
VercelEnterpriseActive
Acme Co.FreeTrial
View source for this demo
import { Tour, TourStep, MultiTourKitProvider, TourOverlay, TourCard } from '@tour-kit/react'

export function App() {
  return (
    <MultiTourKitProvider>
      <Tour id="quickstart">
        <TourStep
          id="welcome"
          target="#demo-header"
          title="Welcome aboard"
          content="A 4-step tour of your dashboard."
          placement="bottom"
          waitForTarget
        />
        <TourStep
          id="nav"
          target="#demo-sidebar"
          title="Navigate anywhere"
          content="Tours can span multiple pages with the router adapter."
          placement="right"
          waitForTarget
        />
        <TourStep
          id="metric"
          target="#demo-metric-revenue"
          title="Track key metrics"
          content="Highlight any DOM node — selectors, refs, or data attributes."
          placement="bottom"
          waitForTarget
        />
        <TourStep
          id="done"
          target="#demo-table"
          title="That's it"
          content="WCAG 2.1 AA, focus-trapped, keyboard-navigable. Ship it."
          placement="top"
          waitForTarget
        />
      </Tour>
      {/* your app */}
      <TourOverlay />
      <TourCard />
    </MultiTourKitProvider>
  )
}

What this demo shows

Each step exercises a different Tour Kit primitive. The same components ship in the published npm packages — copy the source from the demo and you have a working tour in your own app in under two minutes.

Multi-step tours with floating-ui positioning
The 4-step tour uses <Tour> and <TourStep> from @tour-kit/react. Cards anchor to any DOM node via CSS selector or React ref and reposition on scroll, resize, and layout shifts.
Persistent hint beacons
The pulsing dot on the Churn metric is a <Hint> from @tour-kit/hints. Hints survive across sessions when persistence is enabled and dismiss independently of the tour flow.
Focus trap, keyboard nav, ARIA live regions
Every TourCard implements WCAG 2.1 AA — Tab and Shift+Tab cycle inside the card, Escape closes the tour, and step changes announce via aria-live for screen readers.
Headless variants for full markup control
Prefer to render your own card? TourCardHeadless exposes step state via render props so you keep 100% of the styling and DOM. The styled defaults shown here are opt-in.

Next steps

Install Tour Kit

pnpm add @tour-kit/core @tour-kit/react — read the 2-minute quickstart.

Read the docs

Components, hooks, headless variants, router adapters, and recipes.

Compare alternatives

Side-by-side with React Joyride, Shepherd, Driver.js, Intro.js, and more.

Unlock Pro features

Checklists, announcements, surveys, AI chat, and analytics — one-time $99.

Frequently asked questions

How do I install Tour Kit after trying the demo?
Run `pnpm add @tour-kit/core @tour-kit/react` (npm install and bun add work too). The free MIT-licensed core requires only React 18 or 19 and Node 18+. Add @tour-kit/hints for the persistent beacon shown in the demo.
Does Tour Kit work with Next.js, Remix, Vite, or React Router?
Yes. Tour Kit ships first-class router adapters for Next.js (App Router and Pages Router) and React Router v6/v7. For Vite, Remix, Astro, and plain React, the generic useTour API works out of the box — no adapter required.
Is the demo accessible? What about keyboard navigation?
The TourCard implements WCAG 2.1 AA: focus trap (Tab and Shift+Tab cycle inside the card), Escape to close, Enter to advance, ARIA live regions for step announcements, and prefers-reduced-motion support. Try it on the demo page above.
Is the demo using paid features?
No. The demo uses only the free MIT-licensed packages: @tour-kit/core, @tour-kit/react, and @tour-kit/hints. Pro features (checklists, announcements, surveys, adoption tracking, analytics, AI chat, media embeds, scheduling) are documented separately and require a one-time license.