Coachmark

Unstyled React primitive for product tours, built on Base UI Popover

Tier B · UsefulPrimitiveComponent Librarysglza.xyz

A single-purpose headless library by sglza that gives you the compound parts of a product tour — Root, Trigger, Backdrop, Step, Positioner, Popup, Arrow, Stepper, Title, Description, Previous, Next, Close and Viewport — with no styles of its own. It sits on Base UI's Popover, so you inherit collision detection, anchoring and focus management, and it adds the two things a tour needs that a popover does not: explicit step order and a detached trigger, so one popup slides between targets instead of unmounting and remounting. Motion states (entering, exiting, repositioning, idle) are exposed as data attributes on the backdrop, positioner and popup, and out-of-view targets are scrolled into view automatically. The docs site ships live playgrounds with both Tailwind and CSS Modules implementations, plus a View as Markdown link on each page.

Install

pnpm add coachmark

For an agent

Reach for this instead of Driver.js, Shepherd or Intro.js when the app already uses Base UI or Radix and you want the tour to inherit the project's own popover styling rather than fight a themed widget — it ships zero CSS, so budget real time for styling the popup, backdrop and spotlight yourself. The detached-trigger behaviour is the reason to pick it: one Popup animating between targets instead of a remount per step, driven by the entering/exiting/repositioning data attributes. It is small and young (37 stars), so pin the version and read the source before shipping it into anything load-bearing.

Why it is here. Product tours are the one surface almost every UI kit skips, and this is the rare take that treats them as a composable primitive rather than a drop-in widget you have to skin around.

Install command, framework, licence and component list.

Facts

License: MIT
Pricing: Free, Open source
Framework: React
Styling: Not applicable
Distribution: npm package, GitHub repository
Platform: Web
Content type: Code
Agent readiness: Structured documentation, Readable open source
Accessibility: Built on accessible primitives, Focus management and visible focus, Accessible
Maturity: Beta
GitHub stars: 37
Package: coachmark

Components it ships

14 total

Coachmark Backdrop Popover Progress Stepper

Helps you build

Onboarding Web App Onboarding Checklist Feature Announcement

Notable for

Built on Base UI Popover
Detached triggers reposition one popup across steps
Motion states as data attributes
Completely unstyled
Docs pages offer View as Markdown

Provenance

Verified 2026-08-15. HTTP 200. https://sglza.xyz/coachmark (WebFetch + raw HTML via curl), https://github.com/sglza/coachmark

Also in Component Libraries

sglza.xyzTier B