# 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.

<Callout>
  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.
</Callout>

## Installation

<ElementsInstaller path="edge" />

## Usage

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

```tsx
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',
  },
}}
/>