Toolbar

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

The Toolbar component provides a positioned toolbar that attaches to nodes in Vue 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.

Install using CLI

AI Elements Vue

shadcn-vue CLI

npx ai-elements-vue@latest add toolbar

Install Manually

Copy and paste the following code in the same folder.

Toolbar.vue

index.ts

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'
import { Position } from '@vue-flow/core'
import { NodeToolbar } from '@vue-flow/node-toolbar'
import { reactiveOmit } from '@vueuse/core'

const props = withDefaults(
  defineProps<{
    class?: HTMLAttributes['class']
    position?: Position
  }>(),
  {
    position: Position.Bottom,
  },
)

const delegatedProps = reactiveOmit(props, 'class')
</script>

<template>
  <NodeToolbar
    data-slot="toolbar"
    v-bind="delegatedProps"
    :class="cn(
      'flex items-center gap-1 rounded-sm border bg-background p-1.5',
      props.class,
    )"
  >
    <slot />
  </NodeToolbar>
</template>