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

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

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

---

AI Elements

shadcn CLI

Manual

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

className?string

...props?ComponentProps<typeof NodeToolbar>

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 Scroll to topCopy pageOpen in chat