Create your first Frigade Flow



First, sign up up your Frigade account for free here. Once you’re signed in, grab your Frigade public API key in the API Keys section of the dashboard.



Install @frigade/react with either npm or yarn

npm install @frigade/react

Add a component

For this demo, we will create a simple onboarding checklist for a SaaS product. Add the FrigadeProvider to your app’s entry point (e.g. App.tsx).

import { FrigadeProvider } from '@frigade/react';

const App = () => {
  return (
      // Your app

Now you can use the FrigadeChecklist component to render a Flow. Open the Frigade Flows tab in the dashboard and create a new Checklist Flow.

This Flow will be pre-populated with a simple onboarding checklist YAML file that you can use for this demo. Copy the flowId from your new Flow and add it to a FrigadeChecklist component in your app where you wish to render it.

  title='Getting Started'
  subtitle='Follow our quick checklist to get started'

If you run your React app, you should now see a fully functioning onboarding checklist. Congratulations, you have just built your first Flow in Frigade!

The default <FrigadeChecklist/> component

Next steps

Now that you’ve got the hang of it, here are some next steps to take your onboarding to the next level.

Explore components

The above checklist is just one of many production-ready components that you can use to build your Flows. To see a full list of available components, visit the Components docs for a list of components and how to configure them.

Style your components

Most developers want to customize the look and feel of their Flows to match their app’s design. To style the existing Frigade components, see the Styling page.

Build custom Flows and components

Maybe you want to build a fully headless onboarding Flow instead of a Frigade component. Take a look at our docs on creating custom Flows