CatalystFeedback and status
CoachMarkv1.0.10Ready for Production
An interactive guided tour component for product onboarding with full custom styling support. Built on react-joyride with customizable tooltips, 13 placement options, and CVA theming capabilities.
Prefer AI-assisted development?
This documentation is available via the Catalyst MCP Server. Learn how to connect →
Catalyst CoachMark extends react-joyride with built-in Catalyst design tokens, custom tooltip rendering, and 13 placement options — giving you a production-ready guided tour with zero configuration.
Preview
Installation
npm install @pmi/catalyst-coachmarkimport { CoachMark } from '@pmi/catalyst-coachmark';API Reference
CoachMark
Prop
Type
Step
Prop
Type
TooltipRenderProps
Prop
Type
Accessibility
When using a custom tooltipComponent, spread tooltipProps onto the tooltip container and give it an accessible name that includes the step progress (for example, aria-labelledby referencing the visible title and step counter).
Keyboard Interactions
| Key | Description |
|---|---|
Tab | Move focus between interactive elements in the tooltip |
Enter / Space | Activate the focused button (Next, Back, Skip) |
Escape | Close the tour and return focus to the element that started it. In controlled mode (stepIndex), end the tour on ACTIONS.CLOSE in callback. Disabled by disableCloseOnEsc on the CoachMark or the step |
Choosing the Right Component
| Component | When to use |
|---|---|
| CoachMark | Multi-step guided tours and feature onboarding flows |
| Tooltip | Single-element contextual hints on hover/focus |
| Popover | Interactive overlays triggered by a user action |
| Dialog | Full modal interruptions requiring user acknowledgement |