Docs

React

Installation

How to set up Flows in your React application.

The Flows React SDK is a library that allows you to integrate Flows into React applications. It includes a components package to simplify getting started with Flows in your application.

Check out our template projects for examples of how to implement Flows in your application.

Install the React SDK

You can install the Flows React SDK from npm:

npm i @flows/react

Add the FlowsProvider

The SDK provides a FlowsProvider component that you can use to wrap your app. Initialize it with your organization ID and environment key, which you can find in the Settings > General and Settings > Environments sections of the Flows dashboard.

layout.tsx
import { FlowsProvider } from "@flows/react";
 
const App = () => {
  return (
    <FlowsProvider
      organizationId="your-organization-id" // Find this in Settings > General
      environment="production" // Default environment
      userId="your-user-id" // Identify the user
      components={{}}
      tourComponents={{}}
    >
      {/* Your app code here */}
    </FlowsProvider>
  );
};

For a full list of supported properties, see the FlowsProvider documentation.

Optional: Use built-in components

To simplify implementation, you can use the @flows/react-components package, which provides pre-built components and utilities for block rendering.

You can install the Flows React Components SDK from npm:

npm i @flows/react-components

Then, import and use the components in your app:

layout.tsx
import { FlowsProvider } from "@flows/react";
import * as components from "@flows/react-components"; 
import * as tourComponents from "@flows/react-components/tour"; 
import "@flows/react-components/index.css"; 
 
const App = () => {
  return (
    <FlowsProvider
      organizationId="your-organization-id" // Find this in Settings > General
      environment="production" // Default environment
      userId="your-user-id" // Identify the user
      tourComponents={{
        ...tourComponents, 
      }}
      components={{
        ...components, 
      }}
    >
      {/* Your app code here */}
    </FlowsProvider>
  );
};

Create your first workflow

That's it! You're now ready to create your first workflow. See our quickstart guide for more information.

On this page