Examples library

Modal

A dialog to focus user attention on relevant information

Modal example application – Flows

This example showcases a modal powered by @flows/react-components.

Modals are useful to focus the user’s attention on just one thing. But since they are disruptive by design, only use them when necessary to avoid annoying your users.

Use modals to welcome new users to your app, announce major updates, or give users timely warnings and alerts.

Features

When a user opens the application for the first time, they encounter a simple modal, followed by a modal with custom HTML content.

Below is a screenshot of how the workflow is set up:

Flows workflow setup for the Modal example

Getting started

  1. Sign up for Flows if you haven’t already. You can create a free account here.
  2. Clone the repository from GitHub and install the required dependencies in the project directory.
  3. Add your organization ID in the providers.tsx file.
  4. Recreate the workflow in your organization and publish it.
  5. Run the development server with pnpm dev.

Learn more

To learn more about Flows take a look at the following resources:

Framework

Next.js

Tags

Adoption
Education
Engagement
Onboarding

Build anything with Flows