61 lines
1.4 KiB
Markdown
61 lines
1.4 KiB
Markdown
# 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>',
|
|
},
|
|
}}
|
|
/>
|