Tour example application – Flows
This example showcases a product tour powered by @flows/react and the built-in components from @flows/react-components.
Tours are multi-step flows used to guide users through new, undiscovered, or changed products and features.
Good tours:
- Are concise and direct (try to limit them to five steps).
- Match the user’s context (don’t show a tour for a feature the user has already explored).
- Use short, meaningful copy.
Features
When a user opens the application for the first time, they encounter a welcome modal, followed by a series of tooltips, a wait step, and a final modal. All the UI elements are built using the pre-packaged components from @flows/react-components.
Below is a screenshot demonstrating the workflow configuration for this Tour example:

Welcome Modal
The welcome modal is defined using HTML in its body field. Flows renders HTML in any text-based input. The HTML is written using Tailwind CSS classes to style the content.

Full HTML for the welcome modal:
Tooltips
Subsequent steps use the TourTooltip component from @flows/react-components to highlight specific elements and actions.
- The first tooltip proceeds when the user navigates to a page containing /new-project.
- The second tooltip waits for the user to click one of the frameworks, identified by the #framework selector.
- The third tooltip allows navigation through standard tooltip buttons.

Wait step
After the tooltips, the flow pauses until the user returns to the home page. The location filter uses a regex pattern (^/$) to detect the home page URL.

Final modal
The final step presents another modal using the same approach as the welcome modal—HTML content styled with Tailwind classes.

Full HTML for the last modal:
Getting started
- Sign up for Flows if you haven’t already. You can create a free account here.
- Clone the repository from GitHub and install the required dependencies in the project directory.
- Add your organization ID in the providers.tsx file.
- Recreate the workflow in your organization and publish it.
- Run the development server with pnpm dev.
Learn more
To learn more about Flows take a look at the following resources:
This tour example demonstrates how quickly you can create a guided user onboarding flow with Flows. Feel free to explore more advanced configurations and styling to tailor the experience for your users.