React AI Controls

Controls preview

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).

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 controls AI component into my project

Related Components

FAQ