AI

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

Installation 

npx ai-elements@latest add connection

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

fromX:

number
The x-coordinate of the connection start point.

fromY:

number
The y-coordinate of the connection start point.

toX:

number
The x-coordinate of the connection end point.

toY:

number
The y-coordinate of the connection end point.