"use client";

import {
  Background,
  Handle,
  NodeProps,
  Position,
  ReactFlow,
  Node,
} from "@xyflow/react";
import { BaseNode } from "@/components/base-node";

const defaultNodes = [
  {
    id: "1",
    position: { x: 0, y: 0 },
    type: "customNode",
    data: {
      label: "Custom Node",
    },
  },
];

const nodeTypes = {
  customNode: CustomNode,
};

function CustomNode({ data }: NodeProps<Node<{ label: string }>>) {
  return (
    <BaseNode>
      <>
        {data.label}
        <Handle type="source" position={Position.Right} />
        <Handle type="target" position={Position.Left} />
      </>
    </BaseNode>
  );
}

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


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(
      "relative rounded-md border bg-card p-5 text-card-foreground",
      className,
      selected ? "border-muted-foreground shadow-lg" : "",
      "hover:ring-1",
    )}
    tabIndex={0}
    {...props}
  ></div>
));
BaseNode.displayName = "BaseNode";


Base Node

Installation