KQ-194 · SPOTLIGHT/TOUR
Spotlight Tour
A guided onboarding tour. A dimming scrim cuts a moving spotlight over each target in turn while a popover explains it, gliding from one step to the next; the highlighted element stays lit through the dark. Arrow keys and the buttons step through, Escape or the close control ends it, focus is trapped in the popover, and the spotlight re-tracks its target on scroll and resize.
KQ-194 · SPOTLIGHT/TOUR
Search…
Tour idle
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/spotlight-tour
Props
- steps
- TourStep[]
- default —
- Ordered steps — id, a target ref, title, and body.
- open
- boolean
- default —
- Whether the tour is running (controlled).
- onOpenChange
- (open) => void
- default —
- Fires when the tour opens or closes.
- onFinish
- () => void
- default —
- Fires when the last step is completed, not merely dismissed.
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | TourStep[] | — | Ordered steps — id, a target ref, title, and body. |
| open | boolean | — | Whether the tour is running (controlled). |
| onOpenChange | (open) => void | — | Fires when the tour opens or closes. |
| onFinish | () => void | — | Fires when the last step is completed, not merely dismissed. |