gh-nathanonn-claude-skills-ai-elements-claude-skills-ai-elements/docs/components/controls.md

Controls

URL: /components/controls

---

title: Controls description: A styled controls component for React Flow-based canvases with zoom and fit view functionality. path: elements/components/controls

---

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](/elements/components/canvas) component. See the [Workflow](/elements/examples/workflow) demo for a full example.

Installation

Usage

import { Controls } from "@/components/ai-elements/controls";

<ReactFlow>
    <Controls />
</ReactFlow>

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 />

<TypeTable type={{ className: { description: 'Additional CSS classes to apply to the controls.', type: 'string', }, '...props': { description: 'Any other props from @xyflow/react Controls component (showZoom, showFitView, showInteractive, position, etc.).', type: 'ComponentProps', }, }} />