Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: React AI Conversation
Next: React AI Environment Variables

React AI Edge

React AI edge components with animated and temporary styles for ReactFlow node connections

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.

Edge preview

Scroll to load preview

Installation

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

React AI Conversation

React AI conversation component with auto-scroll, empty state, and scroll-to-bottom button for chat interfaces

React AI Environment Variables

React AI environment variables component for displaying and managing env vars with visibility toggle