React AI Toolbar

Building a node-based editor with ReactFlow? You'll want contextual actions when users select a node—edit, delete, duplicate, that kind of thing. This toolbar pops up below the selected node automatically. Click a node, see the toolbar. Click away, it's gone. We wrap ReactFlow's NodeToolbar and give it nice card styling so it matches your shadcn/ui design. Just drop your buttons inside as children. Works great for AI workflow builders, visual programming tools, or any canvas-style editor where nodes need quick actions.

Toolbar preview

Installation

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

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

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

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

Related Components

FAQ