React AI Connection

Connection preview

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.

Install with AI

If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this AI component for you — no copy-paste, no CLI:

use shadcnio to install the connection AI component into my project

Related Components

FAQ