Coachmark tour
A spotlight tour that pins one note to each target and restores focus when it closes.
Gamma libraryThree things to know
Search the catalogueName, job, or source
Save this patternSource, styles, and notes
Download DESIGN.mdTokens and rules for an agent
Implementation
1"use client";2 3import {4 useEffect,5 useId,6 useRef,7 useState,8 type CSSProperties,9 type HTMLAttributes,10 type KeyboardEvent,11 type ReactNode,12} from "react";13import { ArrowLeft, ArrowRight, X } from "lucide-react";14 15export type CoachmarkStep = {16 id: string;17 /** CSS selector for the element this step points at, scoped to the tour. */18 target?: string;19 title: string;20 body: ReactNode;21};22 23export type CoachmarkTourProps = Omit<24 HTMLAttributes<HTMLDivElement>,25 "children" | "title"26> & {27 steps: CoachmarkStep[];28 /** The surface the tour annotates. */