A styled panel component for React Flow-based canvases to position custom UI elements.
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.
npx ai-elements@latest add panel
- 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
| Prop | Type | Default | Description |
|---|---|---|---|
position | unknown | - | Position of the panel on the canvas. |
className | string | - | Additional CSS classes to apply to the panel. |
...props | ComponentProps<typeof Panel> | - | Any other props from @xyflow/react Panel component. |