gh-nathanonn-claude-skills-ai-elements-claude-skills-ai-elements/docs/components/panel.md

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.

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.

Installation

Usage

import { Panel } from "@/components/ai-elements/panel";

<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', }, }} />