"use client";

import { Background, ReactFlow, Node } from "@xyflow/react";
import { LabeledGroupNode } from "@/components/labeled-group-node";

const nodeTypes = {
  labeledGroupNode: LabeledGroupNode,
};


const defaultNodes: Node[] = [
  {
    id: "1",
    position: { x: 200, y: 200 },
    data: { label: "Group Node" },
    width: 380,
    height: 200,
    type: "labeledGroupNode"
  },
  {
    id: "2",
    position: { x: 50, y: 100 },
    data: { label: "Node" },
    type: "default",
    parentId: "1",
    extent: "parent"
  },
  {
    id: "3",
    position: { x: 200, y: 50 },
    data: { label: "Node" },
    type: "default",
    parentId: "1",
    extent: "parent"
  },
];

export default function LabeledGroupNodeDemo() {
  return (
    <div className="h-full w-full">
      <ReactFlow defaultNodes={defaultNodes} nodeTypes={nodeTypes} fitView>
        <Background />
      </ReactFlow>
    </div>
  );
}


import { Node, NodeProps } from "@xyflow/react";
import { BaseNode } from "@/registry/components/base-node";

type LabeledGroupNode = Node<{
  label: string;
}>;

export function LabeledGroupNode({ data, selected }: NodeProps<LabeledGroupNode>) {
  return (
    <BaseNode
      selected={selected}
      className="bg-white bg-opacity-50 h-full rounded-sm overflow-hidden p-0" 
    >
      {data.label && (
        <div className="bg-gray-200 w-fit p-2 text-xs rounded-br-sm bg-secondary text-card-foreground" >
          {data.label}
        </div>
      )}
    </BaseNode>
  );
}

LabeledGroupNode.displayName = "LabeledGroupNode";


Labeled Group Node

Installation