Tour

A guided walk through an interface: a mask with a hole in it over one element at a time, and a card explaining what it is.

Pass steps, each with a title, description, target and an optional cover image, and open the tour with open.

Set type to "primary" to fill the step card with the primary color, so it stands out on a busy page.

Set placement on a step to put its card on one side of the target, or leave out target to center the step on screen.

Pass mask a style and color to restyle the overlay, and set mask on a step to override it or false to hide it there.

Set mask to false to drop the overlay and keep the page usable, so a reader can fill in the form while the tour points at it.

Pass indicatorsRender to replace the step dots, here with a count like 2 / 5 that stays readable on a longer tour.

Pass actionsRender to change the buttons in the card footer, here adding a Skip button to every step but the last.

Set gap.offset and gap.radius to change the padding and the corner radius of the spotlight around the target.

Pass classNames or styles to style one part of the tour, like section for the card, mask, close or indicator.

The component inside real screens, with the components it usually sits beside.

A dashboard walkthrough that opens with a centered welcome, spotlights each metric card in turn and ends on the invite button.

Tour's props.

TourStep's props.

On This Page