A React Flow edge component that colors the connecting line to signal state — gray by default, blue when selected, red when it carries an error.
"use client";
import StatusEdge from "@/components/ui/status-edge";
import { Background, ReactFlow, ReactFlowProvider } from "@xyflow/react";
import "@xyflow/react/dist/style.css";
const defaultNodes = [
{
id: "1",
position: { x: 200, y: 200 },
data: { label: "Node" },
},
{
id: "2",
position: { x: 400, y: 400 },
data: { label: "Node" },
},
];
const defaultEdges = [
{
id: "e1-2",
source: "1",
target: "2",
type: "status",
data: {
error: true,
},
},
];
const edgeTypes = {
status: StatusEdge,
};
export default function StatusEdgeDemo() {
const defaultViewport = { x: -100, y: -100, zoom: 1.1 };
return (
<div className="w-full h-screen">
<ReactFlowProvider>
<ReactFlow
defaultNodes={defaultNodes}
defaultEdges={defaultEdges}
edgeTypes={edgeTypes}
defaultViewport={defaultViewport}
>
<Background />
</ReactFlow>
</ReactFlowProvider>
</div>
);
}
Part of simple-ai — browse the full library on 21st.dev.