React Flow UI

使用 shadcn/ui 组件和 Tailwind CSS 构建的即用型 React Flow 组件。适用于新项目、最小可行产品 (MVP) 或需要快速启动和运行的项目。

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

Note

React Flow UI 已更新，支持最新版本的 shadcn/ui，适用于 React 19 和 Tailwind 4！阅读更多关于更改以及如何升级此处的信息。

¥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

你需要在项目中配置 shadcn 和 tailwind。如果你尚未安装它，你可以按照 shadcn 安装指南中说明的步骤进行操作。如果你的项目中包含 shadcn 和 tailwind，你可以通过运行以下命令来初始化 shadcn-ui：

¥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

如果你想了解更多关于该项目背后的动机，你可以找到详细的博客文章此处。有关更深入的教程，我们最近还发布了有关 React Flow UI 入门的新指南。

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

Important

使用 React Flow UI 组件需要先导入 React Flow 主 CSS 样式表，然后再导入 shadcn UI 样式表。通常，你会在使用主 <ReactFlow> 组件的 TypeScript 或 Javascript 文件中执行此操作。

¥Using React Flow UI components requires importing the main React Flow CSS stylesheet before you import the shadcn UI stylesheet. You usually do so in the Typescript or Javascript file where you use the main <ReactFlow> component.

App.tsx


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

此命令将组件代码复制到你的组件文件夹中。你可以通过在 components.json 中添加别名来更改此文件夹。

¥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.
它使用你现有的 tailwind 配置。

¥It uses your existing tailwind configuration.
这些组件不是黑盒子，可以根据你的需要进行修改和扩展。

¥The components are not black-boxes and can be modified and extended to fit your needs.

有关更多信息，请访问 shadcn 文档。

¥For more information visit the shadcn documentation .