Tour

Onboarding tour: element spotlight, steps, progress and resume. Pro · Overlays and notifications › Popovers and tours

Product tour: dims the page around a spotlight on each step's target, with a card (title, body, media, progress) next to it. Steps can wait on async work, the target scrolls into view, arrow keys page through the steps and the step is controllable, so a tour can resume where it was left.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add tour

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { Tour } from 'valyro-ui-pro';

Props

Prop	Type	Default
`steps` *	`TourStep[]`		Stops in order; each spotlights its `target` (or is centered without one) with a card of title, text and media.
`open`	`boolean`		Controlled `open`; use with `onOpenChange`.
`defaultOpen`	`boolean`	`false`	Initial `open` when uncontrolled.
`onOpenChange`	`(open: boolean) => void`		Called with the new `open` when it changes.
`step`	`number`		Current step; keep it to resume the tour where the user left.
`defaultStep`	`number`	`0`	Initial `step` when uncontrolled.
`onStepChange`	`(step: number) => void`		Called with the new `step` when it changes.
`onFinish`	`() => void`		Called when the user presses Done on the last step.
`onSkip`	`(step: number) => void`		Called when the user leaves early (✕ or Escape), with the step they left on.
`closeOnEscape`	`boolean`	`true`	Escape skips the tour. Default true.
`closeOnOverlayClick`	`boolean`	`false`	A click on the dimmed backdrop skips the tour. Default false.
`showProgress`	`boolean`	`true`	Progress dots. Default true.
`className`	`string`		Class for the card.
`labels`	`Partial<TourLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Popover — Floating content
Hover Card — Card on hover
Alert — Inline alerts
Toast — Pop-up notifications
Notification Center — Notification inbox
Loading Overlay — Loading screen
Dialog — Modal dialogs
Confirm Dialog — Action confirmation
Drawer — Slide-out panels
Bottom Sheet — iOS-style bottom sheet: snap points, swipe, peek mode

Previous: Hover Card · Next: Text Input · All Overlays and notifications