Skip to main content

@tour-kit/announcements · Pro

Ship the news
inside your product.

In-app announcements for React — modal, banner, toast, slideout, and spotlight variants with scheduling, audience rules, and a priority queue.

Try it free in devSee pricing

Runs free in dev — pay once ($99) when you ship.

5 variants · priority queue · frequency rules · your repo, your code

Live demo

Press the button. That's the component.

The modal and toast below are the live @tour-kit/announcements components — focus-trapped, Esc to close, styled with this site's tokens. This very site's sale banner runs on the same package.

Release notes nobody reads

Features users never discover may as well not exist. The fix is announcing in-product — without turning your app into a popup festival.

Changelogs live in a graveyard

The /changelog page gets traffic from you and your cofounder. Users learn about features by accident.

News lands inside the product

Announce where users already are — modal for the big stuff, toast for the small, spotlight to point at the new button.

Popup chaos, zero coordination

Three teams ship three banners and the user gets all of them at once, on their first session back.

One queue, clear priorities

The priority queue shows one announcement at a time; frequency rules and audience targeting keep each one relevant.

$300/mo for a banner

Messaging suites price in-app announcements like enterprise software and render them in their styles, not yours.

Your design system, $99 once

shadcn-native components or fully headless render props — the announcement looks like your product.

Three steps to production

No iframe embeds, no script tags, no vendor dashboard. The code lands in your repo.

  1. 1

    Install

    One package, zero config.

    terminal
    pnpm add @tour-kit/announcements
  2. 2

    Compose

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

    release-modal.tsx
    import {
  AnnouncementsProvider,
  AnnouncementModal,
} from '@tour-kit/announcements'

<AnnouncementsProvider announcements={[release]}>
  <AnnouncementModal id="v2-launch" useConfig />
</AnnouncementsProvider>
  3. 3

    Ship it

    The announcement lives in your bundle and your version control — no embed script, no vendor dashboard.

    Read the docs

A messaging system, not a popup

Three pillars every userTourKit package shares, plus the coordination machinery that keeps announcements welcome.

Headless or pre-styled

Five shadcn-style variants, each with a headless render-prop twin for fully custom UI.

WCAG 2.1 AA accessible

Focus-trapped modals, Esc to dismiss, screen-reader announcements, reduced-motion safe animations.

The code lands in your repo

No embed script, no vendor dashboard. Announcements are config in your codebase, reviewed in your PRs.

Priority queue & frequency rules

critical > high > normal > low, one at a time; show once, per session, or every N days — per announcement.

Scheduling & timezones

@tour-kit/scheduling

Date windows, business hours, and recurring patterns evaluated in each user’s local timezone.

Rich media embeds

@tour-kit/media

YouTube, Vimeo, Loom, Wistia, GIF, and Lottie inside any announcement, lazy-loaded.

Pro package

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.

Build my announcementSee pricing

No signup, no credit card — install and go.

In-app messaging without the platform tax

userTourKitSaaS platformsOSS libraries
Cost$99 once$200–900/moDIY time
Priority queue✓~—
Design system fitYour componentsTheir iframeCSS overrides
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.

  • < 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.

Announcement questions, answered straight

What developers ask before replacing the changelog page nobody visits.

Five variants from one config shape: centered modal for releases that matter, top/bottom banner for persistent notices, corner toast with auto-dismiss, slideout panel for longer changelogs, and spotlight that anchors to a specific element. Each has a headless render-prop twin.

Announce it where they'll see it.

Install now, run it free in dev, license it when it ships.

$pnpm add @tour-kit/announcements
Get started

Pairs well with

Feature hintsKeep pointing at the new feature after the announcement closes.In-app surveysAsk what users think of the feature you just announced.