Toolbar

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.

Installation

npx ai-elements@latest add toolbar

Usage

import { Toolbar } from '@/components/ai-elements/toolbar';

import { Toolbar } from '@/components/ai-elements/toolbar';
import { Button } from '@/components/ui/button';

const CustomNode = () => (
  <Node>
    <NodeContent>...</NodeContent>
    <Toolbar>
      <Button size="sm" variant="ghost">
        Edit
      </Button>
      <Button size="sm" variant="ghost">
        Delete
      </Button>
    </Toolbar>
  </Node>
);

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 />