Overlays
ProductTourNew in 0.8.0
A spotlight onboarding tour. Each step highlights an element and shows a floating card with Back / Next / Skip.
ProductTourPreview
Press “Start tour”. Use ←/→ to move between steps and Esc to skip.
Usage
tsx
import { ProductTour } from "@vesture/react";
<ProductTour
open={open}
onOpenChange={setOpen}
showDots
steps={[
{ target: "#new", title: "Create", content: "Start a project here." },
{ target: "#search", title: "Search", content: "Find anything.", placement: "right" },
{ title: "Done", content: "That's the tour." },
]}
/>Behavior
- Targets can be CSS selectors, elements or refs. A step without a target is centered on the screen.
- The card flips to the opposite side when there is no room and always stays inside the viewport. The spotlight follows the target through scroll and resize.
- Escape skips; ←/→ move between steps. Focus returns to wherever it was when the tour closes.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | { target?; title?; content; placement?; padding?; blockInteraction? }[] | — | Required. |
| open / defaultOpen / onOpenChange | boolean | — | Open state. |
| step / defaultStep / onStepChange | number | — | Current step. |
| onFinish / onSkip | function | — | Lifecycle callbacks. |
| showOverlay / spotlightRadius | boolean / number | true / 8 | Dimming and cut-out shape. |
| showProgress / showDots / labels | boolean / object | — | Footer customization. |
| renderCard | (ctx) => ReactNode | — | Fully custom card content. |
| closeOnBackdropClick / container | boolean / HTMLElement | — | Behavior and mount point. |