Controls

A styled controls component for React Flow-based canvases with zoom and fit view functionality.

The Controls component provides interactive zoom and fit view controls for React Flow canvases. It includes a modern, themed design with backdrop blur and card styling.

The Controls component is designed to be used with the Canvas component. See the Workflow demo for a full example.

Installation

npx ai-elements@latest add controls

Features

Zoom in/out controls
Fit view button to center and scale content
Rounded pill design with backdrop blur
Theme-aware card background
Subtle drop shadow for depth
Full TypeScript support
Compatible with all React Flow control features

Props

`<Controls />`

Prop

Type