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

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

@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

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 .