GitHub

Node Status Indicator - React Flow

Dependencies:

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 { BaseNode, BaseNodeContent } from "@/components/base-node";
import { NodeStatusIndicator } from "@/components/node-status-indicator";
 
export const LoadingNode = () => {
  return (
    <NodeStatusIndicator status="loading"

2. Connect the component with your React Flow application.


import { Background, ReactFlow } from "@xyflow/react";
 
import { LoadingNode } from "./component-example";
 
const defaultNodes = [
  {
    id: "1",
    position: { x: 120, y: 160 },
    type: "loadingNode",
    data: {},
  },
];
 
const nodeTypes

Examples

Error