React AI Panel

Need a floating toolbar or property inspector over your canvas? Panel is your friend. It's a card-styled overlay that sits in a corner (or wherever you position it) and doesn't move when users pan around. Good for action buttons, node properties, minimaps, whatever UI needs to stay fixed while the canvas scrolls. Mouse events on the panel don't pass through to the canvas, so users can click buttons without accidentally selecting nodes. ReactFlow's Panel component, just styled to match shadcn/ui.

Panel preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/panel.json

npx shadcn@latest add https://www.shadcn.io/registry/panel.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/panel.json

bunx shadcn@latest add https://www.shadcn.io/registry/panel.json

Related Components

FAQ