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.

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>
  );
});