Empty state CTA

This empty state CTA example shows how to replace a static "no data" message with a guided call-to-action card, using the built-in Card component from Flows.

Empty states are one of the highest-leverage moments in onboarding: it's the first time a new account has nothing in it. Instead of writing that copy directly into your app, driving it from a Flows workflow lets you target the message to specific user segments and rewrite it without a deploy.

Features

• Empty project list: the demo app renders a project list that starts with zero items.
• Slotted Card: a FlowsSlot is placed inside the empty area. A workflow's built-in Card block renders into that slot with a title, body, and a primary "Create project" button.
• No custom component required: the Card ships as part of the Basics V2 built-in library, so there is no extra React component to register.

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. Import the workflow by clicking Use this example at the top of this page 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:

• Flows documentation
• Join our community