A product tour made of pulsing hotspots laid over a mock interface, with a step popover that offers Next, Back and Skip and works with the arrow keys.
Jump to any report or teammate.
npx shadcn@latest add https://hyperblur.dev/r/site-hotspot-tour.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/site-hotspot-tour.tsx.
import { SiteHotspotTour } from "@/components/hyperblur/site-hotspot-tour"
<div style={{ position: "relative", height: 320 }}><SiteHotspotTour steps={[{ id: "a", x: 30, y: 20, title: "Search", body: "Find anything." }]}><YourScreen /></SiteHotspotTour></div>| Prop | Type | Default | Description |
|---|---|---|---|
| steps | { id: string; x: number; y: number; title: string; body: string }[] | four sample steps | Tour steps. x and y are percentages of the frame, from 0 to 100. |
| step | number | Controlled step index. Pair with onStepChange. | |
| defaultStep | number | 0 | Initial step when uncontrolled. |
| onStepChange | (step: number) => void | Called when the step changes. | |
| running | boolean | Controlled running state. Pair with onRunningChange. | |
| defaultRunning | boolean | true | Whether the tour starts running when uncontrolled. |
| onRunningChange | (running: boolean) => void | Called when the tour starts or stops. | |
| onFinish | () => void | Called when Done is pressed on the last step. | |
| onSkip | () => void | Called when the tour is skipped with the button or Escape. | |
| popoverWidth | number | 176 | Width of the step popover in pixels. |
| replayLabel | string | "Replay tour" | Label of the button shown after the tour ends. |
| accent | string | "#2f7bff" | Color of the hotspots and the primary button. |
| children | ReactNode | The interface the hotspots sit on. A neutral mock renders when omitted. |