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.
先决条件
¥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.
用法
¥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 .