Node Status Indicator

A node wrapper that has multiple states for indicating the status of a node. Status can be one of the following: success, loading, error.

Dependencies:

@xyflow/react

Installation

Make sure to follow the prerequisites before installing the component.


npx shadcn@latest add https://ui.reactflow.dev/node-status-indicator


pnpm dlx shadcn@latest add https://ui.reactflow.dev/node-status-indicator


yarn dlx shadcn@latest add https://ui.reactflow.dev/node-status-indicator


bun x shadcn@latest add https://ui.reactflow.dev/node-status-indicator

Usage

1. Copy the component into your app


import { NodeStatusIndicator } from "@/components/node-status-indicator";
import { BaseNode } from "@/components/base-node";
 
const NodeStatusIndicatorDemo = () => {
  return (
    <>
      <NodeStatusIndicator status="loading">
        <BaseNode>Demo Node</BaseNode>
      </NodeStatusIndicator>
    </>
  );
};
 
export default NodeStatusIndicatorDemo;

2. Connect the component with your React Flow application.


import { Background, ReactFlow } from "@xyflow/react";
 
import NodeStatusIndicatorDemo from "./component-example";
 
const defaultNodes = [
  {
    id: "1",
    position: { x: 200, y: 200 },
    data: { label: "Node" },
    type: "nodeStatusIndicatorDemo",
  },
];
 
const nodeTypes = {
  nodeStatusIndicatorDemo: NodeStatusIndicatorDemo,
};
 
export default function App() {
  return (
    <div className="h-full w-full">
      <ReactFlow defaultNodes={defaultNodes} nodeTypes={nodeTypes} fitView>
        <Background />
      </ReactFlow>
    </div>
  );
}