Tour
Guide users through your UI with a spotlight, a floating panel and step navigation.
Drive it declaratively with bind:api, or headlessly with the useTour hook
for multi-page tours.
Basic tour
Guarded step
onBeforeNext blocks navigation until a condition is met.
Interactable spotlight
With spotlightInteractable, users can click the highlighted target during the tour.
Placements
The placement prop positions the panel and points the arrow back at the target.
Sizes
The size prop
sets the panel width.
Spotlight
Tune spotlightPadding, spotlightRadius, or turn it off entirely — live while the tour is open.
Display & labels
Toggle showProgress, showSkip, transition, and use custom labels.
Custom footer snippet
The footer snippet receives the full step context and action handlers.
Scroll, skip & callbacks
A disabled step is skipped, a far target is scrolled into view, and lifecycle callbacks fire.