ComponentsNodesNode Header

Node Header

A header designed to work with the <BaseNode /> component. It can contain a title, icon, and list of actions.

Dependencies:
@xyflow/react

Installation

Make sure to follow the prerequisites before installing the component.

npx shadcn@latest add https://ui-components-git-tooltip-node-refactor-xyflow.vercel.app/node-header

Usage

1. Copy the component into your app

"use client";
 
import {
  Background,
  Node,
  NodeProps,
  ReactFlow,
  useNodeId,
  useReactFlow,
} from "@xyflow/react";
 
import { BaseNode } from "@/components/base-node";
import {
  NodeHeader,
  NodeHeaderTitle,
  NodeHeaderActions,
  NodeHeaderMenuAction,
  NodeHeaderIcon,
  NodeHeaderAction,
} from "@/components/node-header";
import {
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu";
import { Rocket, Trash } from "lucide-react";
import { useCallback } from "react";
 
function NodeHeaderDemoNode({
  data,
}: NodeProps<Node<{ title: string; label: string }>>) {
  return (
    <BaseNode className="px-3 py-2">
      <NodeHeader className="-mx-3 -mt-2 border-b">
        <NodeHeaderIcon>
          <Rocket />
        </NodeHeaderIcon>
        <NodeHeaderTitle>{data.title}</NodeHeaderTitle>
        <NodeHeaderActions>
          <NodeHeaderMenuAction label="Expand account options">
            <DropdownMenuLabel>My Account</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuItem>Profile</DropdownMenuItem>
            <DropdownMenuItem>Billing</DropdownMenuItem>
            <DropdownMenuItem>Team</DropdownMenuItem>
            <DropdownMenuItem>Subscription</DropdownMenuItem>
          </NodeHeaderMenuAction>
          <NodeHeaderDeleteAction />
        </NodeHeaderActions>
      </NodeHeader>
 
      <div className="text-sm">{data.label}</div>
    </BaseNode>
  );
}
 
const NodeHeaderDeleteAction = () => {
  const id = useNodeId();
  const { setNodes } = useReactFlow();
 
  const handleClick = useCallback(() => {
    setNodes((prevNodes) =>
      prevNodes.filter((node) => {
        if (node.id === id) {
          window.setTimeout(() => {
            setNodes((prevNodes) => [...prevNodes, node]);
          }, 2000);
 
          return false;
        }
 
        return true;
      }),
    );
  }, []);
 
  return (
    <NodeHeaderAction onClick={handleClick} variant="ghost" label="Delete node">
      <Trash />
    </NodeHeaderAction>
  );
};
 
NodeHeaderDeleteAction.displayName = "NodeHeaderDeleteAction";
 
const nodeTypes = {
  demo: NodeHeaderDemoNode,
};
 
const defaultNodes = [
  {
    id: "1",
    type: "demo",
    position: { x: 200, y: 200 },
    data: {
      title: "Node Header",
      label: "This is the content of the node.",
    },
  },
];
 
export default function NodeHeaderDemo() {
  return (
    <div className="h-full w-full">
      <ReactFlow defaultNodes={defaultNodes} nodeTypes={nodeTypes} fitView>
        <Background />
      </ReactFlow>
    </div>
  );
}

2. Connect the component with your React Flow application.

import DemoWrapper from "@/components/demo-wrapper";
import Demo from "@/registry/components/node-header/demo";
 
export default function DemoPage() {
  return (
    <DemoWrapper>
      <Demo />
    </DemoWrapper>
  );
}

Custom node actions

Many node header actions will be useful across multiple custom nodes. Below are some examples of custom node actions that you might define.

Delete action

export type NodeHeaderDeleteActionProps = Omit<
  NodeHeaderActionProps,
  "onClick"
>;
 
/**
 * A delete action button that removes the node from the graph when clicked.
 */
export const NodeHeaderDeleteAction = React.forwardRef<
  HTMLButtonElement,
  NodeHeaderDeleteActionProps
>((props, ref) => {
  const id = useNodeId();
  const { setNodes } = useReactFlow();
 
  const handleClick = useCallback(() => {
    setNodes((prevNodes) => prevNodes.filter((node) => node.id !== id));
  }, []);
 
  return (
    <NodeHeaderAction
      ref={ref}
      onClick={handleClick}
      variant="ghost"
      {...props}
    >
      <Trash />
    </NodeHeaderAction>
  );
});
 
NodeHeaderDeleteAction.displayName = "NodeHeaderDeleteAction";

Copy action

export interface NodeHeaderCopyActionProps
  extends Omit<NodeHeaderActionProps, "onClick"> {
  onClick?: (nodeId: string, event: React.MouseEvent) => void;
}
 
/**
 * A copy action button that passes the node's id to the `onClick` handler when
 * clicked.
 */
export const NodeHeaderCopyAction = React.forwardRef<
  HTMLButtonElement,
  NodeHeaderCopyActionProps
>(({ onClick, ...props }, ref) => {
  const id = useNodeId();
 
  const handleClick = useCallback(
    (event: React.MouseEvent) => {
      if (!onClick || !id) return;
 
      onClick(id, event);
    },
    [onClick],
  );
 
  return (
    <NodeHeaderAction
      ref={ref}
      onClick={handleClick}
      variant="ghost"
      {...props}
    >
      <Copy />
    </NodeHeaderAction>
  );
});
 
NodeHeaderCopyAction.displayName = "NodeHeaderCopyAction";
Group with LabelBase Node