Initial commit

docs/components/connection.md

@@ -0,0 +1,66 @@
+# 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',
+  },
+}}
+/>