@tour-kit/checklists · Pro
Checklists that walk users
to activation.
An embeddable onboarding checklist for React — task dependencies, progress persistence, and adoption nudges, rendered with your own design system.
Runs free in dev — pay once ($99) when you ship.
< 10KB gzipped · TypeScript strict · WCAG 2.1 AA · your repo, your code
Live demo
Tick the boxes. This one's real.
The checklist below is the live @tour-kit/checklists component — complete a task, watch the dependency unlock, and see progress recalculate. No video, no signup wall.
Activation shouldn't be a maze
Most onboarding stalls between signup and the aha moment. A checklist gives users a visible path — if it doesn't fight your stack.
DIY checklist sprawl
A "quick" useState checklist grows persistence, dependencies, and edge cases until it is a side project nobody owns.
A checklist engine, not a TODO hack
Dependencies, persistence, visibility rules, and progress math are the package. You write the task list.
Heavyweight suite, iframe UI
Pendo-style platforms render their checklist in their styles, behind their script tag, for $300+ a month.
Your components, your tokens
Styled (shadcn-native) or fully headless — the checklist looks like your product because it is your product.
No idea where users stall
Without per-task signals you learn about drop-off from churn, weeks too late.
Per-task events, your analytics
Task completions stream into PostHog, Mixpanel, Amplitude, or GA4 via @tour-kit/analytics — you see the exact task where users stop.
Three steps to production
No iframe embeds, no script tags, no vendor dashboard. The code lands in your repo.
- 1
Install
One package, zero config.
terminalpnpm add @tour-kit/checklists - 2
Compose
Declarative config, headless or pre-styled — the checklist renders with your design system.
onboarding.tsximport { ChecklistProvider, Checklist, } from '@tour-kit/checklists' <ChecklistProvider checklists={[onboarding]}> <Checklist checklistId="onboarding" showProgress /> </ChecklistProvider> - 3
Ship it
The checklist lives in your bundle and your version control — no embed script, no vendor dashboard.
Read the docs
Built for activation, not just ticking boxes
Three pillars every userTourKit package shares, plus the checklist-specific machinery that usually eats a sprint.
Headless or pre-styled
Drop in the shadcn-style component or use the render-prop ChecklistHeadless and own every pixel.
WCAG 2.1 AA accessible
Keyboard operable, screen-reader announced, focus-managed. Lighthouse a11y 100 out of the box.
The code lands in your repo
No embed script, no vendor dashboard, no monthly invoice. Checklists are TypeScript in your bundle.
Task dependencies
dependsOn locks tasks until prerequisites complete, with circular-dependency detection built in.
Progress persistence
localStorage by default; swap in cookies or your API with a one-line storage adapter for cross-device state.
Adoption nudges
@tour-kit/adoptionPair with the adoption tracker to nudge users back to unfinished tasks at the right moment.
Try it free in dev — watermark until you license.
Full functionality in development and on localhost, no key required. One $99 license unlocks production for all Pro packages.
No signup, no credit card — install and go.
Checklists without the platform tax
| userTourKit | SaaS platforms | OSS libraries | |
|---|---|---|---|
| Cost | $99 once | $200–900/mo | DIY time |
| Task dependencies | ✓ | ~ | — |
| Design system fit | Your components | Their iframe | CSS overrides |
The honest pitch
Why pick a fresh library?
Tour Kit is new — no legacy API debt, no corporate-UX baggage, no AGPL contamination. Built headless-first so you bring your own components and styles. Every chip below is a measured technical fact, not a marketing claim.
- < 8KB core gzipped
- WCAG 2.1 AA
- Lighthouse a11y 100
- TypeScript strict
- >80% test coverage
- MIT core
- React 19 ready
- shadcn-native
See the documentation or source on GitHub.
Checklist questions, answered straight
The things developers ask before swapping out a hand-rolled checklist.
Yes. Pass dependsOn: ["task-id"] and the task stays locked until its prerequisites complete. The dependency resolver detects circular dependencies up front, and locked tasks still count toward the progress total so users see the full path to done.
Yes. Enable persistence and state is serialized through a storage adapter — localStorage by default, or swap in cookies or your own API in one line for cross-device, authenticated persistence. A returning user lands exactly where they left off.
Each task takes an action — navigate to a URL, start a @tour-kit/react tour, or run a custom callback. Tasks can also auto-complete from events or custom checks (completedWhen), so "Take the tour" ticks itself when the tour finishes.
No iframe, no injected CSS. The styled component follows shadcn/ui conventions and inherits your tokens; the headless ChecklistHeadless render-prop variant hands you raw state (tasks, progress, completeTask) to render any UI you want.
Everything works. @tour-kit/checklists runs unlicensed in development and on localhost with full functionality; production shows a small watermark until you activate a $99 lifetime license. Activation precedes purchase by design — ship the checklist first, pay when it earns its keep.
Ship the checklist. Skip the side project.
Install now, watch it run free in dev, license it when it ships.