React AI Connection

When users drag to create a new connection between nodes, this is what they see—a smooth bezier curve with a little circle at the end showing where it'll attach. It's the "live preview" while dragging, before the edge is actually created. Uses your theme's ring color so it fits naturally with your design. The curve math is pretty standard (control points at 50% horizontal distance) but it looks good for typical left-to-right workflow layouts. Pair it with the Edge component for the final static connections.

Connection preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/connection.json

npx shadcn@latest add https://www.shadcn.io/registry/connection.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/connection.json

bunx shadcn@latest add https://www.shadcn.io/registry/connection.json

Related Components

FAQ