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.
React Flow UI 已更新，以支持最新版本的 shadcn/ui，适用于 React 19 和 Tailwind 4！阅读更多关于更改和如何升级的信息，请点击 这里。
先决条件
🌐 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如果你想了解更多关于这个项目背后的动机，你可以在这里 找到一篇详细的博客文章。对于更深入的教程，我们最近还发布了一份关于开始使用 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.
使用 React Flow UI 组件 需要在导入 shadcn UI 样式表 之前导入 React Flow 主 CSS 样式表。通常你会在使用主 <ReactFlow> 组件的 Typescript 或 Javascript 文件中进行此操作。
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- 此命令会将组件代码复制到你的组件文件夹中。你可以通过在
components.json中添加别名来更改此文件夹。 - 它会自动安装所有必要的依赖
- 它利用先前添加的甚至已修改的组件，或者询问你是否想覆盖它们。
- 它使用你现有的 tailwind 配置。
- 这些组件不是黑箱，可以被修改和扩展以满足你的需求。
欲了解更多信息，请访问 shadcn 文档 。
🌐 For more information visit the shadcn documentation .