Panel

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.

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

npx ai-elements@latest add panel

npx shadcn@latest add @ai-elements/panel

npx shadcn@latest add @ai-elements/panel

import { cn } from "@repo/shadcn-ui/lib/utils";
import { Panel as PanelPrimitive } from "@xyflow/react";
import type { ComponentProps } from "react";

type PanelProps = ComponentProps<typeof PanelPrimitive>;

export const Panel = ({ className, ...props }: PanelProps) => (
  <PanelPrimitive
    className={cn(
      "m-4 overflow-hidden rounded-md border bg-card p-1",
      className
    )}
    {...props}
  />
);

import { cn } from "@repo/shadcn-ui/lib/utils";import { Panel as PanelPrimitive } from "@xyflow/react";import type { ComponentProps } from "react";type PanelProps = ComponentProps<typeof PanelPrimitive>;export const Panel = ({ className, ...props }: PanelProps) => (  <PanelPrimitive    className={cn(      "m-4 overflow-hidden rounded-md border bg-card p-1",      className    )}    {...props}  />);

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

Prop

Type

Installation

Usage

Features

Props

<Panel />

On this page

`<Panel />`