Base Node

A node wrapper with some basic styling used for creating a shared design among all nodes in your application. Similarly to shadcn ui’s card  the components file exports:

• The BaseNode main container,
• The BaseNodeHeader container where you would usually add actions and a BaseNodeHeaderTitle
• The BaseNodeContent container where you would add the main contents of the node.
• The BaseNodeFooter container where you may want to add extra information, or visible actions.

In case you need to fine-tune how interactions like dragging and scrolling work with your custom components, React Flow provides several CSS utility classes

You should use the nodrag React Flow utility class in interactive components of your node such as buttons, to disable dragging the node inside the flow when the user is interacting with buttons or sliders.

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

import { memo } from "react";
 
import { Button } from "@/components/ui/button";
import {
  BaseNode,
  BaseNodeContent,
  BaseNodeFooter,
  BaseNodeHeader,
  BaseNodeHeaderTitle,
} from "@/components/base-node";
import { Rocket } from "lucide-react";
 
export const BaseNodeFullDemo = memo(() => {
  return (
    <BaseNode className="w-96">
      <BaseNodeHeader className="border-b">
        <Rocket className="size-4" />
        <BaseNodeHeaderTitle>Header</BaseNodeHeaderTitle>
      </BaseNodeHeader>
      <BaseNodeContent>
        <h3 className="text-lg font-bold">Content</h3>
        <p className="text-xs">
          This is a full-featured node with a header, content, and footer. You
          can customize it as needed.
        </p>
      </BaseNodeContent>
      <BaseNodeFooter>
        <h4 className="text-md self-start font-bold">Footer</h4>
 
        <Button variant="outline" className="nodrag w-full">
          Action 1
        </Button>
      </BaseNodeFooter>
    </BaseNode>
  );
});
 
BaseNodeFullDemo.displayName = "BaseNodeFullDemo";

import { Background, FitViewOptions, ReactFlow } from "@xyflow/react";
 
import { BaseNodeFullDemo } from "./component-example";
 
const nodeTypes = {
  baseNodeFull: BaseNodeFullDemo,
};
 
const defaultNodes = [
  {
    id: "2",
    position: { x: 200, y: 200 },
    data: {},
    type: "baseNodeFull",
  },
];
 
const fitViewOptions: FitViewOptions = {
  padding: "100px",
};
 
export default function App() {
  return (
    <div className="h-full w-full">
      <ReactFlow
        defaultNodes={defaultNodes}
        nodeTypes={nodeTypes}
        fitView
        fitViewOptions={fitViewOptions}
      >
        <Background />
      </ReactFlow>
    </div>
  );
}

Theming

To customize the visual appearance of your custom nodes, you can simply use Tailwind CSS  classes. All of the React Flow components are based on shadcn UI , and you should follow the shadcn UI theming guide  to customize aspects like typography and colors in your application.

In most occasions though, when developing custom nodes, you may simply need to add custom Tailwind CSS classes. All of the BaseNode components are just light wrappers around <div>.

For example, to change the border color of a node, based on an hypothetical execution status, you can pass extra classNames:

// Assuming your component is receiving a `data` prop
export const BaseNodeSimpleDemo = memo(({ data }: NodeProps) => {
  return (
    <BaseNode
      className={cn('w-[350px] p-0 hover:ring-orange-500', {
        'border-orange-500': data.status === 'loading',
        'border-red-500': data.status === 'error',
      })}
    >
      {/* Your custom node definiton goes here */}
    </BaseNode>
  );
});