Tour

Introduce people to new features using multi-step tours.

Props

Tour

PropTypeDefaultDescription
childrenstring | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>
defaultIsActivebooleanActivate the tour by default.
initialStepnumberThe initial step index.
isActivebooleanMake the tour controlled.
onComplete() => voidCalled when the last step is completed.
onDismiss(index: number) => voidCalled when the current step is closed or dismissed.
tourRefRefObject<{ isActive: boolean isCompleted: boolean; targetElement: HTMLElement | null; targetRef: MutableRefObject<HTMLElement | null>; ... 10 more ...; getDismissProps: PropGetterV2<...>; }>

TourSpotlight

PropTypeDefaultDescription
closeOnClickboolean
hideOverlayboolean
motionPreset"fade" | "none"
spacingnumber

Was this helpful?