opinion
Tour
A guided walkthrough: a dimmed page with one real element highlighted at a time.
Toolbar tourStart the tour; it highlights each button in turn
In context
First runA welcome card offers the tour
Welcome to Tideline, MayaHarbour rebrand is on track for 24 Oct
Two minutes to see the board, the inbox and the calendar.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
steps | TourStep[] | Yes | — |
open | boolean | undefined | No | — |
defaultOpen | boolean | undefined | No | — |
onOpenChange | ((open: boolean) => void) | undefined | No | — |
currentStep | number | undefined | No | — |
onStepChange | ((index: number) => void) | undefined | No | — |
onFinish | (() => void) | undefined | No | — |
Targets and scroll
target is a function returning the real element (a deliberate exception to the no-function-props rule). If it returns null, the callout centres on screen. Page scroll is locked while a tour is open, and the highlighted element stays clickable.
data-rebar-* attributes
data-rebar-component="tour"; parts include the overlay, mask, highlight and callout.
Migrating to Ant Design
AntD's Tour is a close equivalent (steps, open, onOpenChange; currentStep is AntD's current). Step target has the same function shape.