# 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.

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

## Installation

<ElementsInstaller path="connection" />

## Usage

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

```tsx
<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',
  },
}}
/>