AI

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 component. See the Workflow demo for a full example.

Installation 

npx ai-elements@latest add panel

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 />

position?:

'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
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.