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

npx ai-elements@latest add toolbar

npx shadcn@latest add @ai-elements/toolbar

npx shadcn@latest add @ai-elements/toolbar

import { cn } from "@repo/shadcn-ui/lib/utils";
import { NodeToolbar, Position } from "@xyflow/react";
import type { ComponentProps } from "react";

type ToolbarProps = ComponentProps<typeof NodeToolbar>;

export const Toolbar = ({ className, ...props }: ToolbarProps) => (
  <NodeToolbar
    className={cn(
      "flex items-center gap-1 rounded-sm border bg-background p-1.5",
      className
    )}
    position={Position.Bottom}
    {...props}
  />
);

import { cn } from "@repo/shadcn-ui/lib/utils";import { NodeToolbar, Position } from "@xyflow/react";import type { ComponentProps } from "react";type ToolbarProps = ComponentProps<typeof NodeToolbar>;export const Toolbar = ({ className, ...props }: ToolbarProps) => (  <NodeToolbar    className={cn(      "flex items-center gap-1 rounded-sm border bg-background p-1.5",      className    )}    position={Position.Bottom}    {...props}  />);

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

Prop

Type

Installation

Usage

Features

Props

<Toolbar />

On this page

`<Toolbar />`