Source: https://ai-sdk.dev/elements/components/edge

Vercel

Slash Forward

Sparkles

AI SDK

Docs Cookbook Providers Playground AI ElementsAI ElementsLeft sparkleRight sparkle AI GatewayGateway

Search...⌘KFeedback GitHub Vercel LogoSign in with Vercel

Workflow

Edge

Customizable edge components for React Flow canvases with animated and temporary states.

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 component. See the Workflow demo for a full example.

Installation

---

AI Elements

shadcn CLI

Manual

npx ai-elements@latest add edge

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:

Prop

Type

id?string

source?string

target?string

sourceX?number

sourceY?number

targetX?number

targetY?number

sourcePosition?Position

targetPosition?Position

markerEnd?string

style?React.CSSProperties

Controls

A styled controls component for React Flow-based canvases with zoom and fit view functionality. Node

A composable node component for React Flow-based canvases with Card-based styling.

On this page

Installation Features Edge Types Edge.Temporary Edge.Animated Props

GitHubEdit this page on GitHub Scroll to topCopy pageOpen in chat