Source: https://ai-sdk.dev/elements/components/panel

Vercel

Slash Forward

Sparkles

AI SDK

Docs Cookbook Providers Playground AI ElementsAI ElementsLeft sparkleRight sparkle AI GatewayGateway

Search...⌘KFeedback GitHub Vercel LogoSign in with Vercel

Workflow

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

AI Elements

shadcn CLI

Manual

npx ai-elements@latest add panel

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

className?string

...props?ComponentProps<typeof Panel>

Node

A composable node component for React Flow-based canvases with Card-based styling. Toolbar

A styled toolbar component for React Flow nodes with flexible positioning and custom actions.

On this page

Installation Features Props <Panel />

GitHubEdit this page on GitHub Scroll to topCopy pageOpen in chat