Controls

A styled controls component for Vue Flow-based canvases with zoom and fit view functionality.

The Controls component provides interactive zoom and fit view controls for Vue Flow canvases. It includes a modern, themed design with backdrop blur and card styling.

Install using CLI

AI Elements Vue
shadcn-vue CLI
npx ai-elements-vue@latest add controls

Install Manually

Copy and paste the following code in the same folder.

Controls.vue
index.ts
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'
import { Controls as ControlsPrimitive } from '@vue-flow/controls'
import { reactiveOmit } from '@vueuse/core'
import '@vue-flow/controls/dist/style.css'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()

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

<template>
  <ControlsPrimitive
    data-slot="controls"
    v-bind="delegatedProps"
    :class="cn(
      'gap-px overflow-hidden rounded-md border bg-card p-1 shadow-none!',
      '[&>button]:rounded-md [&>button]:border-none! [&>button]:bg-transparent! [&>button]:hover:bg-secondary!',
      props.class,
    )"
  />
</template>

Features

  • Zoom in/out controls
  • Fit view button to center and scale content
  • Rounded pill design with backdrop blur
  • Theme-aware card background
  • Subtle drop shadow for depth
  • Full TypeScript support
  • Compatible with all Vue Flow control features

Props

<Controls />

classstring
''
Additional CSS classes to apply to the controls.
Edit this page
Connection
Edge