React Flow UI
Ready-to-use React Flow components built with shadcn/ui components and Tailwind CSS . Useful for new projects, MVPs, or when you need to get up and running quickly.
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 . For a more in-depth tutorial, we also recently published a new guide on getting started with React Flow UI.
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 .