Initial commit

docs/components/canvas.md

@@ -0,0 +1,60 @@
+# Canvas
+
+URL: /components/canvas
+
+---
+
+title: Canvas
+description: A React Flow-based canvas component for building interactive node-based interfaces.
+path: elements/components/canvas
+
+---
+
+The `Canvas` component provides a React Flow-based canvas for building interactive node-based interfaces. It comes pre-configured with sensible defaults for AI applications, including panning, zooming, and selection behaviors.
+
+<Callout>
+  The Canvas component is designed to be used with the [Node](/elements/components/node) and [Edge](/elements/components/edge) components. See the [Workflow](/elements/examples/workflow) demo for a full example.
+</Callout>
+
+## Installation
+
+<ElementsInstaller path="canvas" />
+
+## Usage
+
+```tsx
+import { Canvas } from "@/components/ai-elements/canvas";
+```
+
+```tsx
+<Canvas nodes={nodes} edges={edges} nodeTypes={nodeTypes} edgeTypes={edgeTypes} />
+```
+
+## Features
+
+-   Pre-configured React Flow canvas with AI-optimized defaults
+-   Pan on scroll enabled for intuitive navigation
+-   Selection on drag for multi-node operations
+-   Customizable background color using CSS variables
+-   Delete key support (Backspace and Delete keys)
+-   Auto-fit view to show all nodes
+-   Disabled double-click zoom for better UX
+-   Disabled pan on drag to prevent accidental canvas movement
+-   Fully compatible with React Flow props and API
+
+## Props
+
+### `<Canvas />`
+
+<TypeTable
+type={{
+  children: {
+    description: 'Child components like Background, Controls, or MiniMap.',
+    type: 'ReactNode',
+  },
+  '...props': {
+    description: 'Any other React Flow props like nodes, edges, nodeTypes, edgeTypes, onNodesChange, etc.',
+    type: 'ReactFlowProps',
+  },
+}}
+/>