Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProAn onboarding spotlight tour with a gliding cutout, an on-screen step card, keyboard paging and focus return.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Targets can be CSS selectors or refs. If a target is missing or hidden (for example a sidebar that collapses on small screens), the card is centred and the whole page stays dimmed, so the tour never gets stuck.
| Prop | Type | Default | Description |
|---|---|---|---|
steps | ProductTourStep[] | - | Steps, in order. |
open | boolean | - | Open state when controlled. |
defaultOpen | boolean | false | Open state on first render when uncontrolled. |
onOpenChange | (open: boolean) => void | - | Called when the tour opens or closes. |
step | number | - | Zero-based step when controlled. |
defaultStep | number | 0 | Step each run starts from when uncontrolled. |
onStepChange | (step: number) => void | - | Called with the new step. |
onComplete | () => void | - | Called when Done is pressed on the last step. |
onSkip | (step: number) => void | - | Called when the tour is skipped, closed or escaped. |
padding | number | 8 | Space between the target and the spotlight edge, in pixels. |
radius | number | 12 | Spotlight corner radius, in pixels. |
labels | Partial<ProductTourLabels> | English | Button text and the counter(step, total) function. |
className | string | - | Extra classes for the card. |
| Field | Type | Default | Description |
|---|---|---|---|
target | string | RefObject<HTMLElement> | - | Element to spotlight. |
title | ReactNode | - | Card heading; labels the dialog. |
description | ReactNode | - | Card body; describes the dialog. |
side | "top" | "right" | "bottom" | "left" | "bottom" | Preferred side. Flips when there is no room. |
align | "start" | "center" | "end" | "center" | Alignment along that side. |
role="dialog", aria-modal) labelled by the step title and described by its body. Focus moves to it on open and on every step, Tab stays inside it, and focus returns to the element that started the tour.