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

npx ai-elements@latest add connection

npx shadcn@latest add @ai-elements/connection

npx shadcn@latest add @ai-elements/connection

import type { ConnectionLineComponent } from "@xyflow/react";

const HALF = 0.5;

export const Connection: ConnectionLineComponent = ({
  fromX,
  fromY,
  toX,
  toY,
}) => (
  <g>
    <path
      className="animated"
      d={`M${fromX},${fromY} C ${fromX + (toX - fromX) * HALF},${fromY} ${fromX + (toX - fromX) * HALF},${toY} ${toX},${toY}`}
      fill="none"
      stroke="var(--color-ring)"
      strokeWidth={1}
    />
    <circle
      cx={toX}
      cy={toY}
      fill="#fff"
      r={3}
      stroke="var(--color-ring)"
      strokeWidth={1}
    />
  </g>
);

import type { ConnectionLineComponent } from "@xyflow/react";const HALF = 0.5;export const Connection: ConnectionLineComponent = ({  fromX,  fromY,  toX,  toY,}) => (  <g>    <path      className="animated"      d={`M${fromX},${fromY} C ${fromX + (toX - fromX) * HALF},${fromY} ${fromX + (toX - fromX) * HALF},${toY} ${toX},${toY}`}      fill="none"      stroke="var(--color-ring)"      strokeWidth={1}    />    <circle      cx={toX}      cy={toY}      fill="#fff"      r={3}      stroke="var(--color-ring)"      strokeWidth={1}    />  </g>);

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

Prop

Type

Installation

Usage

Features

Props

<Connection />

On this page

`<Connection />`