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

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

## Installation

<ElementsInstaller path="controls" />

## Usage

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

```tsx
<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<typeof Controls>',
  },
}}
/>