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

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

Connection

A custom connection line component for React Flow-based canvases with animated bezier curve styling.

The Connection component provides a styled connection line for React Flow canvases. It renders an animated bezier curve with a circle indicator at the target end, using consistent theming through CSS variables.

The Connection 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 connection

Features

---

• Smooth bezier curve animation for connection lines
• Visual indicator circle at the target position
• Theme-aware styling using CSS variables
• Cubic bezier curve calculation for natural flow
• Lightweight implementation with minimal props
• Full TypeScript support with React Flow types
• Compatible with React Flow's connection system

Props

---

<Connection />

Prop

Type

fromX?number

fromY?number

toX?number

toY?number

Canvas

A React Flow-based canvas component for building interactive node-based interfaces. Controls

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

On this page

Installation Features Props <Connection />

GitHubEdit this page on GitHub Scroll to topCopy pageOpen in chat