• Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
drewmcdonald

drewmcdonald

promptCompare

Public
Like
promptCompare
Home
Code
7
.claude
3
backend
2
docs
1
frontend
4
shared
.mcp.json
deno.json
Environment variables
2
Branches
1
Pull requests
Remixes
History
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
.claude
/
skills
/
ai-elements
/
references
/
toolbar.md
Code
/
.claude
/
skills
/
ai-elements
/
references
/
toolbar.md
Search
…
Viewing readonly version of main branch: v108
View latest version
toolbar.md

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.

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

PropTypeDefaultDescription
classNamestring-Additional CSS classes to apply to the toolbar.
...propsComponentProps<typeof NodeToolbar>-Any other props from @xyflow/react NodeToolbar component (position, offset, isVisible, etc.).
FeaturesVersion controlCode intelligenceCLIMCP
Use cases
TeamsAI agentsSlackGTM
DocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Open Source Pledge
Terms of usePrivacy policyAbuse contact
© 2026 Val Town, Inc.