React Flow 组件
¥React Flow Components
这是一组有用的组件，你可以轻松地将它们集成到你的 React Flow 应用中。它利用新的 shadcn CLI ，它建立在 Tailwind CSS 和 shadcn/ui 组件之上。
¥This is a collection of useful components that you can easily integrate into your React Flow application. It utilizes the new shadcn CLI , which builds on top of Tailwind CSS and shadcn/ui components.
先决条件
¥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 组件 的新指南。
¥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 Components .
用法
¥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中添加别名来更改此文件夹。¥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 .