Skip to content
IndexDesign corpus
Component LibrariesPrimitiveComponent LibraryMITFreeReact

Coachmark

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

Aboutsglza.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.
Components it ships14 total
Helps you build3
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

Related resourcesComponent Libraries