FeatureTour, Asgard Docs

Navigation & chrome

Walk users through the UI with a guided tour.

A guided product tour that walks users through UI elements with spotlights and tooltips.

Key features:

Targets via CSS selector, element, or a resolver function
Highlight modes and overlay styles per step
Progress indicators, skip control and keyboard navigation
Per-step callbacks, waits and optional auto-advance

Loading preview…

When to use it

First-run onboarding
Announcing a new feature
Guided walkthroughs of a workflow

Properties

Prop	Type	Default	Description
`config`	`TourConfig`	—	Tour definition: steps plus overlay, progress, keyboard and callback options.
`isOpen`	`boolean`	—	Whether the tour is currently running.
`onClose`	`() => void`	—	Called when the tour completes, is skipped, or is dismissed.
`startStep`	`number`	`0`	Index of the step to open on.

Notes

TourConfig.steps is an array of TourStep; each step has target, title, content and optional position, highlight, action, wait and onNext/onPrevious.
config exposes showProgress, showSkip, showStepNumbers, keyboard, autoAdvance and onComplete / onSkip / onStepChange callbacks.
target accepts a CSS selector string, an HTMLElement, or a () => HTMLElement | null resolver so steps can point at dynamic elements.

Presets