GitHub

Labeled Group Node - React Flow

Dependencies:

Installation

Make sure to follow the prerequisites before installing the component.


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


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


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


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

Usage

1. Copy the component into your app


import { memo } from "react";
 
import { GroupNode } from "@/components/labeled-group-node";
 
const LabeledGroupNodeDemo = memo(() => <GroupNode label="Label" />);
 
LabeledGroupNodeDemo.displayName

2. Connect the component with your React Flow application.


import { Background, ReactFlow, Node } from "@xyflow/react";
import LabeledGroupNodeDemo from "./component-example";
 
const nodeTypes = {
  labeledGroupNode: LabeledGroupNodeDemo,
};
 
const defaultNodes: Node[] = [
  {
    id: "1",