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

Connection

URL: /components/connection

---

title: Connection description: A custom connection line component for React Flow-based canvases with animated bezier curve styling. path: elements/components/connection

---

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](/elements/components/canvas) component. See the [Workflow](/elements/examples/workflow) demo for a full example.

Installation

Usage

import { Connection } from "@/components/ai-elements/connection";

<ReactFlow connectionLineComponent={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 />

<TypeTable type={{ fromX: { description: 'The x-coordinate of the connection start point.', type: 'number', }, fromY: { description: 'The y-coordinate of the connection start point.', type: 'number', }, toX: { description: 'The x-coordinate of the connection end point.', type: 'number', }, toY: { description: 'The y-coordinate of the connection end point.', type: 'number', }, }} />