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