Skip to main content


Tour block


A tour block is used to represent a tour component in your flow.

Tours are great for guiding your users along their journey through your product. Typically they include anchored experiences that educate users on how the product works.

A tour block is comprised of tour items, which are the steps in the tour.

Tour items are finished sequentially. Accordingly, we provide next and back methods that corresponding to completing a tour step and going back to the previously completed tour step.

Completing a tour item could be attributed to clicking a "Got it" button in a popover that explains how to access workspace settings in your application.



Tours can be configured with custom fields.

Tour item

Tour items can be configured with the following default fields:

TitlestringContent for the tour item title heading
Bodyrich textContent for the tour item body section
Next labelstringContent for a next button in the tour item
Back labelstringContent for a back button in the tour item

You can also define a set of custom fields on a tour item.


The tour block has a fixed set of transitions that determine which path(s) to follow. These transitions map to tour actions that a user can take.

completeMarks the tour as completed
dismissMarks the tour as dismissed


Get up and running quickly with the pre-built React tour component. Compose and style this component to best fit your needs. Or use the tour block headlessly and attach the tour’s fields and state to your own tour UI component.