Source: https://ai-sdk.dev/elements/components/controls

Vercel

Slash Forward

Sparkles

AI SDK

Docs Cookbook Providers Playground AI ElementsAI ElementsLeft sparkleRight sparkle AI GatewayGateway

Search...⌘KFeedback GitHub Vercel LogoSign in with Vercel

Workflow

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

---

AI Elements

shadcn CLI

Manual

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

className?string

...props?ComponentProps<typeof Controls>

Connection

A custom connection line component for React Flow-based canvases with animated bezier curve styling. Edge

Customizable edge components for React Flow canvases with animated and temporary states.

On this page

Installation Features Props <Controls />

GitHubEdit this page on GitHub Scroll to topCopy pageOpen in chat