67 lines
1.6 KiB
Markdown
67 lines
1.6 KiB
Markdown
# 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',
|
|
},
|
|
}}
|
|
/>
|