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.
React Flow UI has been updated to support the latest version of shadcn/ui, on React 19 and Tailwind 4! Read more about the changes and how to upgrade here.
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 initIf 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.
Using React Flow UI components with Tailwind CSS 4 requires importing the
main React Flow CSS stylesheet after you import the shadcn UI
stylesheet. To ensure the styles are loaded in the correct order, you should
always import the styles in your global.css file (or index.css file),
after you import tailwindcss. Avoid importing the styles in your App.tsx
file or any other file that is imported by your App.tsx file.
@import "tailwindcss";
@import "tw-animate-css";
@layer base {
@import "@xyflow/react/dist/style.css";
}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 .