React Flow Components

This is a collection of useful components that you can easily integrate into your React Flow application. It utilizes the new shadcn CLI , which builds on top of Tailwind CSS  and shadcn/ui  components.

Prerequisites

You need to have shadcn and tailwind configured in your project. If you haven’t installed it, you can follow the steps explained in the shadcn installation guide . If shadcn and tailwind are part of your project, you can initialize shadcn-ui by running:

npx shadcn@latest init

pnpm dlx shadcn@latest init

yarn dlx shadcn@latest init

bun x shadcn@latest init

If you want to learn more about the motivation behind this project, you can find a detailed blog post here . For a more in-depth tutorial, we also recently published a new guide on getting started with React Flow Components .

Usage

Find a component you like and run the command to add it to your project.

npx shadcn@latest add https://ui.reactflow.dev/component-name

pnpm dlx shadcn@latest add https://ui.reactflow.dev/component-name

yarn dlx shadcn@latest add https://ui.reactflow.dev/component-name

bun x shadcn@latest add https://ui.reactflow.dev/component-name

• This command copies the component code inside your components folder. You can change this folder by adding an alias inside your components.json.

• It automatically installs all necessary dependencies

• It utilizes previously added and even modified components or asks you if you’d like to overwrite them.

• It uses your existing tailwind configuration.

• The components are not black-boxes and can be modified and extended to fit your needs.

For more information visit the shadcn documentation .