Guide users through a specific product flow or feature
Tour
component is a sequential walkthrough designed to guide users through in-app steps. While tours can be one of the most effective ways to onboard users, they can also be a bit controversial. A poorly designed tour can be frustrating, especially if it interrupts users when they have a task in mind. We’ve all been there—logging into an app only to be confronted by an intrusive tour that disrupts our focus. This often leads to users rushing to close or ignore the tour, resulting in a net negative experience.
When to Use Tours:
after
, before
, center
, end
, start
.as={Dialog}
will render the Flow in a modal Dialog. Defaults to Box
.flow.start()
or step.start()
from the parent component if you set this to false
. Most components should not need to override this behavior.Defaults to true
.true
.false
, the step will not be automatically completed when clicked.false
, the step will not be automatically completed when clicked.false
, all steps will be rendered at once.
Defaults to true
, which means only one step will be rendered at a time in sequential order.top
, right
, bottom
, left
.title: Hello, ${name}!
in the Flow configuration and pass variables={{name: 'John'}}
to customize the copy.