Initial commit

docs/components/panel.md

@@ -0,0 +1,66 @@
+# Panel
+
+URL: /components/panel
+
+---
+
+title: Panel
+description: A styled panel component for React Flow-based canvases to position custom UI elements.
+path: elements/components/panel
+
+---
+
+The `Panel` component provides a positioned container for custom UI elements on React Flow canvases. It includes modern card styling with backdrop blur and flexible positioning options.
+
+<Callout>
+  The Panel 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="panel" />
+
+## Usage
+
+```tsx
+import { Panel } from "@/components/ai-elements/panel";
+```
+
+```tsx
+<ReactFlow>
+    <Panel position="top-left">
+        <Button>Custom Action</Button>
+    </Panel>
+</ReactFlow>
+```
+
+## Features
+
+-   Flexible positioning (top-left, top-right, bottom-left, bottom-right, top-center, bottom-center)
+-   Rounded pill design with backdrop blur
+-   Theme-aware card background
+-   Flexbox layout for easy content alignment
+-   Subtle drop shadow for depth
+-   Full TypeScript support
+-   Compatible with React Flow's panel system
+
+## Props
+
+### `<Panel />`
+
+<TypeTable
+type={{
+  position: {
+    description: 'Position of the panel on the canvas.',
+    type: "'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'",
+  },
+  className: {
+    description: 'Additional CSS classes to apply to the panel.',
+    type: 'string',
+  },
+  '...props': {
+    description: 'Any other props from @xyflow/react Panel component.',
+    type: 'ComponentProps<typeof Panel>',
+  },
+}}
+/>