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.

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.