Is @tour-kit/hints really free?

Free while you build it. Development, evaluation, testing and CI cost nothing, with no feature gates. Serving it to end users of a deployed application needs a one-time licence key, from $9.99, which covers every Tour Kit package.

Do dismissed hints stay dismissed?

Yes. dismiss() persists through a storage adapter (localStorage by default, your API in one line), so a hint never re-haunts a user. hide() closes it for the session only, it returns next visit.

Does the pulsing animation respect prefers-reduced-motion?

Yes, twice over: the pulse keyframes are wrapped in a reduced-motion media query, and a useReducedMotion hook gates the render-time animation classes. Users who opt out of motion get a static, fully functional hotspot.

What variants ship besides the pulsing dot?

Pulsing beacon, notification-count badge, beacon-with-label, and a "What's new" pill, all positionable on any element, all under 6.5 KB gzipped total, all stylable via variants or fully headless composition.

@tour-kit/hints · Free in development

Point users to what's new,
without a tour.

Name: userTourKit
Brand: userTourKit
Price: 9.99 USD
Availability: InStock

Persistent hints, tooltips, and pulsing beacons for React feature discovery. Each hint lives independently until dismissed, no sequence, no modal takeover.

Build my first hint View on GitHub

$ pnpm add @tour-kit/hints

< 6.5 KB gzipped · BSL 1.1 · TypeScript strict · WCAG 2.1 AA

Live demo

Click a beacon. It's live.

The pulsing hotspots below are the real @tour-kit/hints components, open a tooltip, dismiss it, and it stays dismissed. No video, no signup wall.

acme.app/projects

Click a pulsing beacon, the tooltip is the live component.

ProjectsReportsSettings

New features shouldn't need a memo

Users don't read release emails and skip full tours. A well-placed pulse is often all the feature discovery you need.

Forcing a tour for one feature

A 6-step walkthrough to highlight one new button trains users to skip every tour you ever ship.

One beacon, zero interruption

A pulsing dot on the feature itself, curious users click, busy users keep working.

Hand-rolled tooltips drift

DIY hint state scatters across components: who was dismissed, where, did it survive the redesign?

Independent, persistent state

Every hint tracks open/dismissed through a storage adapter, dismissed means dismissed, across sessions.

Tooltip libraries fight your stack

Generic tooltip packages bring their own positioning quirks, z-index wars, and CSS resets.

Floating-UI positioning, your styles

Anchored by the same battle-tested positioning engine as the tours, styled with your tokens, shadcn-native.

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.
terminal
```
pnpm add @tour-kit/hints
```

Compose

Declarative config, headless or pre-styled, the hint renders with your design system.

new-feature-hint.tsx

import { HintsProvider, Hint } from '@tour-kit/hints'

<HintsProvider>
  <Hint
    id="reports-launch"
    target="#reports-nav"
    title="Reports just shipped"
    content="Track usage over time."
  />
</HintsProvider>

3
Ship it
The hint lives in your bundle and your version control, no embed script, no vendor dashboard.
Read the docs

Small package, complete feature discovery

Three pillars every userTourKit package shares, plus what makes hints the lightest way to ship discovery.

Headless or pre-styled

Drop-in beacon and tooltip components, or compose HintHotspot and HintTooltip yourself.

WCAG 2.1 AA accessible

Hotspots are real buttons, keyboard focusable, screen-reader labeled, Esc dismisses the tooltip.

The code lands in your repo

Free while you build. No embed script, no usage caps, no MAU tiers, and the source is yours to fork.

Four hint variants

Pulsing beacon, count badge, beacon-with-label, and "What's new" pill, pick per feature.

Dismissal that sticks

dismiss() persists per user via storage adapters; hide() pauses for the session. Never re-haunt a user.

Reduced-motion safe pulse

The pulse honors prefers-reduced-motion at both the CSS and render level, static hotspot, same function.

Free & open source

Build your first hint, free in development, no signup.

Install the package and ship a beacon today. Pro packages add checklists, announcements, and surveys when you need them.

Build my first hint See pricing

Free in development, no signup, no credit card.

Feature discovery without the baggage

	userTourKit	SaaS platforms	OSS libraries
Cost	Free in dev, from $9.99	$200–900/mo	Free
Bundle impact	< 6.5 KB	External script	30–50KB
Accessibility	WCAG 2.1 AA	~	—

Full comparison →

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.

Under 4 KB tree-shaken
WCAG 2.1 AA
Lighthouse a11y 100
TypeScript strict
>80% test coverage
Free in development
React 19 ready
shadcn-native

See the documentation or source on GitHub.

Hint questions, answered straight

What developers ask before adding beacons to their app.

Tours are sequential, step 1, step 2, done. Hints are independent: each beacon has its own open/dismissed state and lives until the user dismisses it. Use a hint to point at one new feature; use a tour to walk through a flow. The packages compose if you need both.

Ship a beacon before lunch.

Free in development, under 6.5 KB. The fastest feature-discovery win in your backlog.

$pnpm add @tour-kit/hints

Get started

Pairs well with

Product toursWhen one beacon isn’t enough, walk users through the flow.Product announcementsAnnounce the release, then leave a hint behind.

Point users to what's new,without a tour.