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
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
-
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.