Status Edge

Overview

The Status Edge is a simple React Flow edge component that provides visual feedback through color coding. It provides:

• Color-coded states for different conditions:
  • Red for error state
  • Gray for default state
• Smooth transitions between states
• Built on React Flow's BaseEdge component

Components Used

This edge is built using React Flow Components:

• Base Edge - For the core edge structure
• getBezierPath - For calculating the curved edge path

Installation

pnpm dlx shadcn@latest add https://simple-ai.dev/r/status-edge.json

Usage

The Status Edge is designed to provide visual feedback for connections in your flow. Here's how to use it in your React Flow application:

// Example usage of the Status Edge
const edges = [
  {
    id: "e1-2",
    source: "1",
    target: "2",
    type: "status",
    data: {
      error: true // Set to true to show error state
    }
  }
];
 
// Register the edge type
const edgeTypes = {
  status: StatusEdge,
};