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

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