Vercel
Slash Forward
Sparkles
AI
Workflow

Toolbar

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

The Toolbar component provides a positioned toolbar that attaches to nodes in React Flow canvases. It features modern card styling with backdrop blur and flexbox layout for action buttons and controls.

The Toolbar component is designed to be used with the Node component. See the Workflow demo for a full example.

Installation

npx ai-elements@latest add toolbar

Features

  • Attaches to any React Flow node
  • Bottom positioning by default
  • Rounded card design with border
  • Theme-aware background styling
  • Flexbox layout with gap spacing
  • Full TypeScript support
  • Compatible with all React Flow NodeToolbar features

Props

<Toolbar />

Prop

Type

Panel

A styled panel component for React Flow-based canvases to position custom UI elements.

Artifact

A container component for displaying generated content like code, documents, or other outputs with built-in actions.

On this page

Installation
Features
Props
<Toolbar />
GitHubEdit this page on GitHub