TanStack
How to set up Flows in your TanStack application.
Flows makes it easy to add product adoption experiences into your React app built with TanStack Start. Integrating Flows into your app enables you to create interactive workflows, user onboarding, guided tours, in-app messaging, and more.
This guide walks you through integrating Flows into your TanStack app using the React SDK and components package to get you started.
Using an AI coding assistant? Install the Flows install skill to let your agent set up Flows automatically.
Install the React SDK and components package
You can install the Flows React SDK from npm:
npm i @flows/react @flows/react-componentsIntegrate FlowsProvider in your application
Create a Flows component that wraps your application with the FlowsProvider. Then add
the Flows component to your root layout.
Check out the TanStack template project for a complete example.
import { Link } from "@tanstack/react-router";
import { FlowsProvider, type LinkComponentType } from "@flows/react";
import * as components from "@flows/react-components";
import * as tourComponents from "@flows/react-components/tour";
import * as surveyComponents from "@flows/react-components/survey";
import "@flows/react-components/index.css";
export const Flows = ({ children }: { children: React.ReactNode }) => {
return (
<FlowsProvider
organizationId="YOUR_ORGANIZATION_ID" // Find this in Settings > General
userId="YOUR_USER_ID" // Replace this with user id from your app
environment="production" // Default environment
components={{ ...components }}
tourComponents={{ ...tourComponents }}
surveyComponents={{ ...surveyComponents }}
LinkComponent={LinkComponent}
>
{children}
</FlowsProvider>
);
};
const LinkComponent: LinkComponentType = ({ href, children, className, onClick }) => (
<Link to={href} className={className} onClick={onClick}>
{children}
</Link>
);For a full list of supported properties, see the FlowsProvider documentation. For an example of how to create a custom component, see the TanStack template project.
Create your first workflow
That's it! You're now ready to create your first workflow. See our quickstart guide for more information.