Shadcn.io is not affiliated with official shadcn/ui
React AI Edge
React AI edge components with animated and temporary styles for ReactFlow node connections
Edge preview
Two edge styles for your workflow canvas: Animated has a little dot that travels along the path—great for showing data flow or active connections. Temporary is dashed, useful during drag operations or for "pending" connections that aren't finalized yet. Both use smooth bezier curves and automatically figure out handle positions. Register these in ReactFlow's edgeTypes and assign them to your edges based on state. The animation is subtle (2 seconds per loop) and uses your primary color.
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 edge AI component into my projectRelated Components
React AI Canvas
Node-based visual editor
React AI Node
Draggable canvas nodes
React AI Connection
Dynamic connection lines
React AI Controls
Zoom and pan controls
React AI Panel
Side panel overlays
React AI Plan
Workflow planning
FAQ
Was this page helpful?
Sign in to leave feedback.