Initial commit

docs/components/controls.md

@@ -0,0 +1,60 @@
+# 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>',
+  },
+}}
+/>