Panel

A styled panel component for Vue Flow-based canvases to position custom UI elements.

The Panel component provides a positioned container for custom UI elements on Vue Flow canvases. It includes modern card styling with backdrop blur and flexible positioning options.

Install using CLI

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

Install Manually

Copy and paste the following code in the same folder.

Panel.vue
index.ts
<script setup lang="ts">
import type { PanelPositionType } from '@vue-flow/core'
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'
import { Panel as PanelPrimitive } from '@vue-flow/core'
import { reactiveOmit } from '@vueuse/core'

interface PanelProps {
  class?: HTMLAttributes['class']
  position?: PanelPositionType
}

const props = withDefaults(defineProps<PanelProps>(), {
  position: 'top-right',
})

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

<template>
  <PanelPrimitive
    data-slot="panel"
    v-bind="delegatedProps"
    :class="cn('m-4 overflow-hidden rounded-md border bg-card p-1', props.class)"
  >
    <slot />
  </PanelPrimitive>
</template>

Features

  • Flexible positioning (top-left, top-right, bottom-left, bottom-right, top-center, bottom-center)
  • Rounded pill design with backdrop blur
  • Theme-aware card background
  • Flexbox layout for easy content alignment
  • Subtle drop shadow for depth
  • Full TypeScript support
  • Compatible with Vue Flow's panel system

Props

<Panel />

classstring
''
Additional CSS classes to apply to the panel.
positionPanelPositionType
top-right
Position of the panel on the canvas.
Edit this page
Node
Toolbar