gh-nathanonn-claude-skills-ai-elements-claude-skills-ai-elements/docs/components/edge.md

Edge

URL: /components/edge

---

title: Edge description: Customizable edge components for React Flow canvases with animated and temporary states. path: elements/components/edge

---

The Edge component provides two pre-styled edge types for React Flow canvases: Temporary for dashed temporary connections and Animated for connections with animated indicators.

The Edge component is designed to be used with the [Canvas](/elements/components/canvas) component. See the [Workflow](/elements/examples/workflow) demo for a full example.

Installation

Usage

import { Edge } from "@/components/ai-elements/edge";

const edgeTypes = {
    temporary: Edge.Temporary,
    animated: Edge.Animated,
};

<Canvas nodes={nodes} edges={edges} edgeTypes={edgeTypes} />;

Features

• Two distinct edge types: Temporary and Animated
• Temporary edges use dashed lines with ring color
• Animated edges include a moving circle indicator
• Automatic handle position calculation
• Smart offset calculation based on handle type and position
• Uses Bezier curves for smooth, natural-looking connections
• Fully compatible with React Flow's edge system
• Type-safe implementation with TypeScript

Edge Types

Edge.Temporary

A dashed edge style for temporary or preview connections. Uses a simple Bezier path with a dashed stroke pattern.

Edge.Animated

A solid edge with an animated circle that moves along the path. The animation repeats indefinitely with a 2-second duration, providing visual feedback for active connections.

Props

Both edge types accept standard React Flow EdgeProps:

<TypeTable type={{ id: { description: 'Unique identifier for the edge.', type: 'string', }, source: { description: 'ID of the source node.', type: 'string', }, target: { description: 'ID of the target node.', type: 'string', }, sourceX: { description: 'X coordinate of the source handle (Temporary only).', type: 'number', }, sourceY: { description: 'Y coordinate of the source handle (Temporary only).', type: 'number', }, targetX: { description: 'X coordinate of the target handle (Temporary only).', type: 'number', }, targetY: { description: 'Y coordinate of the target handle (Temporary only).', type: 'number', }, sourcePosition: { description: 'Position of the source handle (Left, Right, Top, Bottom).', type: 'Position', }, targetPosition: { description: 'Position of the target handle (Left, Right, Top, Bottom).', type: 'Position', }, markerEnd: { description: 'SVG marker ID for the edge end (Animated only).', type: 'string', }, style: { description: 'Custom styles for the edge (Animated only).', type: 'React.CSSProperties', }, }} />