最近，我们在开源名册中推出了一个令人兴奋的新成员：React Flow 组件。这些是预先构建的节点、边和其他 UI 元素，你可以快速将它们添加到你的 React Flow 应用中以启动并运行。问题是这些组件建立在 shadcn/ui  和 shadcn CLI 之上。

¥Recently, we launched an exciting new addition to our open-source roster: React Flow Components. These are pre-built nodes, edges, and other ui elements that you can quickly add to your React Flow applications to get up and running. The catch is these components are built on top of shadcn/ui  and the shadcn CLI.

我们之前写过我们的经验以及是什么促使我们在 xyflow 博客  上选择 shadcn，但在本教程中，我们将重点介绍如何从头开始使用 shadcn、Tailwind CSS 和 React Flow Components。

¥We’ve previously written about our experience and what led us to choosing shadcn over on the xyflow blog , but in this tutorial we’re going to focus on how to get started from scratch with shadcn, Tailwind CSS, and React Flow Components.

入门

¥Getting started

首先，我们将设置一个新的 vite 项目以及我们需要的所有依赖和配置。首先运行以下命令：

¥To begin with, we’ll set up a new vite project along with all the dependencies and config we’ll need. Start by running the following command:

npx create-vite@latest

pnpm dlx create-vite@latest

yarn dlx create-vite@latest

bun x create-vite@latest

Vite 能够为许多流行框架搭建项目，但我们只关心 React！此外，请确保设置 TypeScript 项目。React Flow 的文档是 JavaScript 和 TypeScript 的混合体，但对于 shadcn 组件，TypeScript 是必需的！

¥Vite is able to scaffold projects for many popular frameworks, but we only care about React! Additionally, make sure to set up a TypeScript project. React Flow’s documentation is a mix of JavaScript and TypeScript, but for shadcn components TypeScript is required!

所有 shadcn 和 React Flow 组件都使用 Tailwind CSS  设置样式，因此接下来我们需要安装它和其他一些依赖：

¥All shadcn and React Flow components are styled with Tailwind CSS , so we’ll need to install that and a few other dependencies next:

npm install -D tailwindcss postcss autoprefixer

pnpm add -D tailwindcss postcss autoprefixer

yarn add --dev tailwindcss postcss autoprefixer

bun add --dev tailwindcss postcss autoprefixer

Tailwind 是一个高度可定制的实用程序优先 CSS 框架，大部分定制都是在 tailwind.config.js 文件中完成的。幸运的是，该包可以为我们生成默认配置：

¥Tailwind is a heavily customizable utility-first CSS framework and much of that customization is done in a tailwind.config.js file. Fortunately, the package can generate a default config for us:

npx tailwindcss init -p

pnpm dlx tailwindcss init -p

yarn dlx tailwindcss init -p

bun x tailwindcss init -p

Tailwind 的工作原理是扫描项目的源代码并构建仅包含你正在使用的实用程序的 CSS 文件。为了确保这一点，我们需要改变两件事：

¥Tailwind works by scanning your project’s source code and building a CSS file that contains only the utilities you’re using. To make sure that happens we need to change two things:

1. 更新 tailwind.config.js 中的 content 字段以包含可能包含 Tailwind 类的任何源文件。

   ¥Update the content field in tailwind.config.js to include any source files that might contain Tailwind classes.

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{ts,tsx,js,jsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

2. 用 Tailwind 指令替换生成的 src/index.css 文件：

   ¥Replace the generated src/index.css file with the Tailwind directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

最后，我们可以继续删除生成的 src/App.css 文件并更新 src/App.jsx 以仅渲染一个空的 div：

¥Finally, we can go ahead and delete the generated src/App.css file and update src/App.jsx to just render an empty div:

function App() {
  return <div className="w-screen h-screen p-8"></div>;
}
 
export default App;

设置 shadcn/ui

¥Setting up shadcn/ui

Vite 在生成 TypeScript 项目时为我们搭建了一些 tsconfig 文件，我们需要对这些文件进行一些更改，以便 shadcn 组件可以正常工作。shadcn CLI 非常聪明（我们稍后会讲到），但它不能解释每个项目结构，因此相互依赖的 shadcn 组件会使用 TypeScript 的导入路径。

¥Vite scaffolds some tsconfig files for us when generating a TypeScript project and we’ll need to make some changes to these so the shadcn components can work correctly. The shadcn CLI is pretty clever (we’ll get to that in a second) but it can’t account for every project structure so instead shadcn components that depend on one another make use of TypeScript’s import paths.

在 tsconfig.json 和 tsconfig.app.json 中，将以下内容添加到 compilerOptions 对象：

¥In both tsconfig.json and tsconfig.app.json add the following to the compilerOptions object:

{
  ...
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

然后我们需要教 Vite 如何解析这些路径：

¥And then we need to teach Vite how to resolve these paths:

npm i -D @types/node

pnpm add -D @types/node

yarn add --dev @types/node

bun add --dev @types/node

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'node:path';
 
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

此时，你可以随意拍拍自己的后背，剩余一会儿。有很多前期配置需要完成，但是一旦我们设置了 shadcn CLI，我们就能够使用单个命令向我们的项目添加新组件 - 即使它们具有依赖或需要修改现有文件！

¥At this point feel free to pat yourself on the back and take a tea break. There’s a lot of up-front configuration to get through but once we have the shadcn CLI set up we’ll be able to add new components to our project with a single command - even if they have dependencies or need to modify existing files!

我们现在可以运行以下命令来在我们的项目中设置 shadcn/ui：

¥We can now run the following command to set up shadcn/ui in our project:

npx shadcn@latest init

pnpm dlx shadcn@latest init

yarn dlx shadcn@latest init

bun x shadcn@latest init

CLI 会询问你一些有关项目的问题，然后它会在项目的根目录中生成一个 components.json 文件，并使用一些主题扩展更新你的 tailwind.config.js。我们现在可以采用所有默认选项：

¥The CLI will ask you a few questions about your project and then it will generate a components.json file in the root of your project, and update your tailwind.config.js with some extensions to your theme. We can take all the default options for now:

✔ Which style would you like to use? › New York
✔ Which color would you like to use as the base color? › Neutral
✔ Would you like to use CSS variables for theming? yes

添加你的第一个组件

¥Adding your first components

为了展示 shadcn 的强大功能，让我们直接开始制作一个新的 React Flow 应用！现在一切都已设置好，我们可以使用单个命令添加 <BaseNode /> 组件：

¥To demonstrate how powerful shadcn can be, let’s dive right into making a new React Flow app! Now everything is set up, we can add the <BaseNode /> component with a single command:

npx shadcn@latest add https://ui.reactflow.dev/base-node

pnpm dlx shadcn@latest add https://ui.reactflow.dev/base-node

yarn dlx shadcn@latest add https://ui.reactflow.dev/base-node

bun x shadcn@latest add https://ui.reactflow.dev/base-node

此命令将生成一个新文件 src/components/base-node.tsx 并更新我们的依赖以包含 @xyflow/react！

¥This command will generate a new file src/components/base-node.tsx as well as update our dependencies to include @xyflow/react!

该 <BaseNode /> 组件不是直接的 React Flow 节点。相反，顾名思义，它是我们许多其他节点的基础。你也可以使用它为所有节点设置统一的样式。让我们通过更新我们的 App.jsx 文件来查看它是什么样子：

¥That <BaseNode /> component is not a React Flow node directly. Instead, as the name implies, it’s a base that many of our other nodes build upon. You can use it to have a unified style for all of your nodes as well. Let’s see what it looks like by updating our App.jsx file:

import '@xyflow/react/dist/style.css';
 
import { BaseNode } from '@/components/base-node';
 
function App() {
  return (
    <div className="w-screen h-screen p-8">
      <BaseNode selected={false}>Hi! 👋</BaseNode>
    </div>
  );
}
 
export default App;

好吧，不是特别令人兴奋…

¥Ok, not super exciting…

请记住，<BaseNode /> 组件由我们使用 shadcn CLI 添加的任何其他 React Flow 组件使用，那么如果我们更改它会发生什么？让我们更新 <BaseNode /> 组件以将任何文本渲染为粗体等宽字体：

¥Remember that the <BaseNode /> component is used by any other React Flow components we add using the shadcn CLI, so what happens if we change it? Let’s update the <BaseNode /> component to render any text as bold monospace instead:

import React from "react";
import { cn } from "@/lib/utils";
 
export const BaseNode = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & { selected?: boolean }
>(({ className, selected, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "rounded-md border bg-card p-5 text-card-foreground font-mono font-bold",
      className,
      selected ? "border-muted-foreground shadow-lg" : "",
      "hover:ring-1",
    )}
    {...props}
  />
));
BaseNode.displayName = "BaseNode";

现在我们将从 React Flow Components 注册表中添加一个实际节点，看看会发生什么：

¥Now we’ll add an actual node from the React Flow Components registry and see what happens:

npx shadcn@latest add https://ui.reactflow.dev/tooltip-node

pnpm dlx shadcn@latest add https://ui.reactflow.dev/tooltip-node

yarn dlx shadcn@latest add https://ui.reactflow.dev/tooltip-node

bun x shadcn@latest add https://ui.reactflow.dev/tooltip-node

我们将更新我们的 App.tsx 文件以渲染正确的流程。我们将使用与大多数示例相同的基本设置，因此我们不会在这里分解各个部分。如果你对 React Flow 还不熟悉，并且想进一步了解如何从头开始设置基本流程，请查看我们的 快速入门指南。

¥And we’ll update our App.tsx file to render a proper flow. We’ll use the same basic setup as most of our examples so we won’t break down the individual pieces here. If you’re still new to React Flow and want to learn a bit more about how to set up a basic flow from scratch, check out our quickstart guide.

import '@xyflow/react/dist/style.css';
 
import { ReactFlow, Position, useNodesState, Node } from '@xyflow/react';
 
import {
  TooltipNode,
  TooltipContent,
  TooltipTrigger,
} from '@/components/tooltip-node';
 
function Tooltip() {
  return (
    <TooltipNode>
      <TooltipContent position={Position.Top}>Hidden Content</TooltipContent>
      <TooltipTrigger>Hover</TooltipTrigger>
    </TooltipNode>
  );
}
 
const nodeTypes = {
  tooltip: Tooltip,
};
 
const initialNodes: Node[] = [
  {
    id: '1',
    position: { x: 0, y: 0 },
    data: {},
    type: 'tooltip',
  },
];
 
function App() {
  const [nodes, , onNodesChange] = useNodesState(initialNodes);
 
  return (
    <div className="h-screen w-screen p-8">
      <ReactFlow
        nodes={nodes}
        onNodesChange={onNodesChange}
        nodeTypes={nodeTypes}
        fitView
      />
    </div>
  );
}
 
export default App;

你看，我们添加的工具提示节点自动使用了我们自定义的 <BaseNode /> 组件！

¥And would you look at that, the tooltip node we added automatically uses the <BaseNode /> component we customized!

快速行动并创造事物

¥Moving fast and making things

现在我们对 shadcn/ui 和 CLI 的工作原理有了基本的了解，我们可以开始看到添加新组件和构建流程是多么容易。要查看 React Flow Components 提供的所有内容，让我们构建一个简单的计算器流程。

¥Now we’ve got a basic understanding of how shadcn/ui and the CLI works, we can begin to see how easy it is to add new components and build out a flow. To see everything React Flow Components has to offer let’s build out a simple calculator flow.

首先，让我们删除 <TooltipNode /> 并撤消对 <BaseNode /> 的更改。除了预制节点外，React Flow Components 还包含用于创建你自己的自定义节点的构建块。要查看它们，我们将添加 node-header 和 labeled-handle 组件：

¥First let’s remove the <TooltipNode /> and undo our changes to <BaseNode />. In addition to pre-made nodes, React Flow Components also contains building blocks for creating your own custom nodes. To see them, we’ll add the node-header and labeled-handle components:

npx shadcn@latest add \
  https://ui.reactflow.dev/node-header \
  https://ui.reactflow.dev/labeled-handle

pnpm dlx shadcn@latest add \
  https://ui.reactflow.dev/node-header \
  https://ui.reactflow.dev/labeled-handle

yarn dlx shadcn@latest add \
  https://ui.reactflow.dev/node-header \
  https://ui.reactflow.dev/labeled-handle

bun x shadcn@latest add \
  https://ui.reactflow.dev/node-header \
  https://ui.reactflow.dev/labeled-handle

我们将创建的第一个节点是一个简单的数字节点，带有一些按钮来增加和减少值以及一个将其连接到其他节点的句柄。创建文件夹 src/components/nodes，然后添加新文件 src/components/nodes/num-node.tsx。

¥The first node we’ll create is a simple number node with some buttons to increment and decrement the value and a handle to connect it to other nodes. Create a folder src/components/nodes and then add a new file src/components/nodes/num-node.tsx.

将以下内容粘贴到新文件中：

¥Paste the following into the new file:

import React, { useCallback } from 'react';
import {
  type Node,
  type NodeProps,
  Position,
  useReactFlow,
} from '@xyflow/react';
 
import { BaseNode } from '@/components/base-node';
import { LabeledHandle } from '@/components/labeled-handle';
import {
  NodeHeader,
  NodeHeaderTitle,
  NodeHeaderActions,
  NodeHeaderMenuAction,
} from '@/components/node-header';
import { Button } from '@/components/ui/button';
import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
 
export type NumNode = Node<{
  value: number;
}>;
 
export function NumNode({ id, data }: NodeProps<NumNode>) {
  const { updateNodeData, setNodes } = useReactFlow();
 
  const handleReset = useCallback(() => {
    updateNodeData(id, { value: 0 });
  }, [id, updateNodeData]);
 
  const handleDelete = useCallback(() => {
    setNodes((nodes) => nodes.filter((node) => node.id !== id));
  }, [id, setNodes]);
 
  const handleIncr = useCallback(() => {
    updateNodeData(id, { value: data.value + 1 });
  }, [id, data.value, updateNodeData]);
 
  const handleDecr = useCallback(() => {
    updateNodeData(id, { value: data.value - 1 });
  }, [id, data.value, updateNodeData]);
 
  return (
    <BaseNode>
      <NodeHeader>
        <NodeHeaderTitle>Num</NodeHeaderTitle>
        <NodeHeaderActions>
          <NodeHeaderMenuAction label="Open node menu">
            <DropdownMenuItem onSelect={handleReset}>Reset</DropdownMenuItem>
            <DropdownMenuItem onSelect={handleDelete}>Delete</DropdownMenuItem>
          </NodeHeaderMenuAction>
        </NodeHeaderActions>
      </NodeHeader>
 
      <div className="flex gap-2 items-center mb-10">
        <Button onClick={handleDecr}>-</Button>
        <pre>{String(data.value).padStart(3, ' ')}</pre>
        <Button onClick={handleIncr}>+</Button>
      </div>
 
      <footer className="bg-gray-100 -m-5">
        <LabeledHandle title="out" type="source" position={Position.Right} />
      </footer>
    </BaseNode>
  );
}

在上面的代码片段中，我们高亮了来自 shadcn/ui 和 React Flow Components 的导入和组件。仅用几行代码，我们就有了一个相当强大的节点：

¥In the snippet above we’ve highlighted the imports and components that come from shadcn/ui and React Flow Components. In just a few lines of code we already have quite a capable node:

我们的 <NumNode /> 组件…

¥Our <NumNode /> component…

• 具有标题和功能下拉菜单的标题。

  ¥Has a header with a title and functional dropdown menu.

• 包含一些简单的控件来增加和减少值。

  ¥Contains some simple controls to increment and decrement a value.

• 具有标记的句柄以将其连接到其他节点。

  ¥Has a labelled handle to connect it to other nodes.

接下来，我们将创建第二个节点，用于计算两个输入值的总和。我们不需要为此节点添加任何其他组件，因此继续创建一个新文件 src/components/nodes/sum-node.tsx 并粘贴以下内容：

¥Next we’ll create a second node that will compute the sum of two input values. We don’t need to add any additional components for this node, so go ahead and create a new file src/components/nodes/sum-node.tsx and paste in the following:

import React, { useEffect } from 'react';
import {
  type Node,
  type NodeProps,
  Position,
  useReactFlow,
  useStore,
} from '@xyflow/react';
 
import { BaseNode } from '../base-node';
import { LabeledHandle } from '../labeled-handle';
import { NodeHeader, NodeHeaderTitle } from '../node-header';
 
export type SumNode = Node<{
  value: number;
}>;
 
export function SumNode({ id }: NodeProps<SumNode>) {
  const { updateNodeData, getHandleConnections } = useReactFlow();
  const { x, y } = useStore((state) => ({
    x: getHandleValue(
      getHandleConnections({ nodeId: id, id: 'x', type: 'target' }),
      state.nodeLookup,
    ),
    y: getHandleValue(
      getHandleConnections({ nodeId: id, id: 'y', type: 'target' }),
      state.nodeLookup,
    ),
  }));
 
  useEffect(() => {
    updateNodeData(id, { value: x + y });
  }, [x, y]);
 
  return (
    <BaseNode className="w-32">
      <NodeHeader>
        <NodeHeaderTitle>Sum</NodeHeaderTitle>
      </NodeHeader>
 
      <footer className="bg-gray-100 -m-5">
        <LabeledHandle
          title="x"
          id="x"
          type="target"
          position={Position.Left}
        />
        <LabeledHandle
          title="y"
          id="y"
          type="target"
          position={Position.Left}
        />
        <LabeledHandle title="out" type="source" position={Position.Right} />
      </footer>
    </BaseNode>
  );
}
 
function getHandleValue(
  connections: Array<{ source: string }>,
  lookup: Map<string, Node<any>>,
) {
  return connections.reduce((acc, { source }) => {
    const node = lookup.get(source)!;
    const value = node.data.value;
 
    return typeof value === 'number' ? acc + value : acc;
  }, 0);
}

React Flow Components 不仅提供用于构建节点的组件。我们还提供预构建的边缘和其他 UI 元素，你可以将其放入流程中以便快速构建。

¥React Flow Components doesn’t just provide components for building nodes. We also provide pre-built edges and other UI elements you can drop into your flows for quick building.

为了更好地可视化计算器流程中的数据，让我们引入 data-edge 组件。此边缘将源节点数据对象的字段渲染为边缘本身的标签。将 data-edge 组件添加到你的项目中：

¥To better visualize data in our calculator flow, let’s pull in the data-edge component. This edge renders a field from the source node’s data object as a label on the edge itself. Add the data-edge component to your project:

npx shadcn@latest add https://ui.reactflow.dev/data-edge

pnpm dlx shadcn@latest add https://ui.reactflow.dev/data-edge

yarn dlx shadcn@latest add https://ui.reactflow.dev/data-edge

bun x shadcn@latest add https://ui.reactflow.dev/data-edge

<DataEdge /> 组件通过从其源节点的 data 对象中查找字段来工作。我们一直将计算器字段中每个节点的值存储在 "value" 属性中，因此我们将更新 edgeType 对象以包含新的 data-edge，并更新 onConnect 处理程序以创建此类型的新边，确保正确设置边的 data 对象：

¥The <DataEdge /> component works by looking up a field from its source node’s data object. We’ve been storing the value of each node in our calculator field in a "value" property so we’ll update our edgeType object to include the new data-edge and we’ll update the onConnect handler to create a new edge of this type, making sure to set the edge’s data object correctly:

import '@xyflow/react/dist/style.css';
 
import {
  ReactFlow,
  OnConnect,
  Position,
  useNodesState,
  useEdgesState,
  addEdge,
  Edge,
  Node,
} from '@xyflow/react';
 
import { NumNode } from '@/components/nodes/num-node';
import { SumNode } from '@/components/nodes/sum-node';
 
import { DataEdge } from '@/components/data-edge';
 
const nodeTypes = {
  num: NumNode,
  sum: SumNode,
};
 
const initialNodes: Node[] = [
  { id: 'a', type: 'num', data: { value: 0 }, position: { x: 0, y: 0 } },
  { id: 'b', type: 'num', data: { value: 0 }, position: { x: 0, y: 200 } },
  { id: 'c', type: 'sum', data: { value: 0 }, position: { x: 300, y: 100 } },
  { id: 'd', type: 'num', data: { value: 0 }, position: { x: 0, y: 400 } },
  { id: 'e', type: 'sum', data: { value: 0 }, position: { x: 600, y: 400 } },
];
 
const edgeTypes = {
  data: DataEdge,
};
 
const initialEdges: Edge[] = [
  {
    id: 'a->c',
    type: 'data',
    data: { key: 'value' },
    source: 'a',
    target: 'c',
    targetHandle: 'x',
  },
  {
    id: 'b->c',
    type: 'data',
    data: { key: 'value' },
    source: 'b',
    target: 'c',
    targetHandle: 'y',
  },
  {
    id: 'c->e',
    type: 'data',
    data: { key: 'value' },
    source: 'c',
    target: 'e',
    targetHandle: 'x',
  },
  {
    id: 'd->e',
    type: 'data',
    data: { key: 'value' },
    source: 'd',
    target: 'e',
    targetHandle: 'y',
  },
];
 
function App() {
  const [nodes, , onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
  const onConnect: OnConnect = useCallback(
    (params) => {
      setEdges((edges) =>
        addEdge({ type: 'data', data: { key: 'value' }, ...params }, edges),
      );
    },
    [setEdges],
  );
 
  return (
    <div className="h-screen w-screen p-8">
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        nodeTypes={nodeTypes}
        edgeTypes={edgeTypes}
        fitView
      />
    </div>
  );
}
 
export default App;

将所有内容放在一起，我们最终得到了一个功能强大的小型计算器！

¥Putting everything together we end up with quite a capable little calculator!

你可以通过添加节点来执行其他操作或使用 shadcn/ui 注册表  中的其他组件获取用户输入，从而继续改进此流程。事实上，请密切关注本指南的后续内容，我们将展示使用 React Flow Components 👀 构建的完整应用。

¥You could continue to improve this flow by adding nodes to perform other operations or to take user input using additional components from the shadcn/ui registry . In fact, keep your eyes peeled soon for a follow-up to this guide where we’ll show a complete application built using React Flow Components 👀.

总结

¥Wrapping up

在短短的时间内，我们设法使用 shadcn React Flow Components 提供的组件和构建块构建了一个相当完整的流程。我们已经了解了：

¥In just a short amount of time we’ve managed to build out a fairly complete flow using the components and building blocks provided by shadcn React Flow Components. We’ve learned:

• 编辑 <BaseNode /> 组件将如何影响从 React Flow Components 注册表中提取的其他节点。

  ¥How editing the <BaseNode /> component will affect other nodes pulled from the React Flow Components registry.

• 如何使用 <NodeHeader /> 和 <LabeledHandle /> 组件等构建块来构建我们自己的自定义节点，而无需从头开始。

  ¥How to use building blocks like the <NodeHeader /> and <LabeledHandle /> components to build our own custom nodes without starting from scratch.

• React Flow Components 还提供自定义边缘（如 <DataEdge />）以放入我们的应用中。

  ¥That React Flow Components also provides custom edges like the <DataEdge /> to drop into our applications.

得益于 Tailwind 的强大功能，调整这些组件的视觉样式就像编辑 tailwind.config.js 和编辑 CSS 文件中的变量一样简单。

¥And thanks to the power of Tailwind, tweaking the visual style of these components is as simple as editing tailwind.config.js and editing the variables in your CSS file.

现在就这些了！你可以在 组件文档页面 上看到我们目前提供的所有组件。React Flow Components 项目仍处于起步阶段：如果你对新组件有任何建议或要求，我们很乐意听取你的意见。或者，也许你已经开始使用 shadcn 和 React Flow Components 构建某些东西。无论哪种方式，请务必在我们的 Discord 服务器  或 Twitter  上告知我们！

¥That’s all for now! You can see all the components we currently have available over on the components docs page. The React Flow Components project is still in its infancy: if you have any suggestions or requests for new components we’d love to hear about them. Or perhaps you’re already starting to build something with shadcn and React Flow Components. Either way make sure you let us know on our Discord server  or on Twitter !