Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: React AI Context
Next: React AI Conversation

React AI Controls

React AI controls component with zoom and pan buttons for ReactFlow canvas navigation

Canvas too zoomed in? Can't see all your nodes? These are your zoom controls. You get the standard ReactFlow buttons—zoom in, zoom out, fit view, toggle interactivity—but styled to match your shadcn/ui design. Drop them in the corner of your Canvas and users can navigate around. We override the default ReactFlow styling with card backgrounds and proper hover states so everything looks cohesive. Position them wherever makes sense (bottom-left is the default, but you've got options).

Controls preview

Scroll to load preview

Installation

React AI Canvas

Node-based visual editor

React AI Node

Draggable canvas nodes

React AI Edge

Node connection lines

React AI Connection

Dynamic connection lines

React AI Panel

Side panel overlays

React AI Toolbar

Action toolbar

FAQ

React AI Context

React AI context component showing token usage, costs, and model limits with circular progress indicator

React AI Conversation

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