Svelte AI Elements

Panel

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

Svelte Flow
Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

Installation

pnpm dlx shadcn-svelte@latest add https://svelte-ai-elements.vercel.app/r/panel.json

If you prefer using jsrepo, please install via the command below:

pnpm dlx jsrepo add @ai/elements/ai-elements/workflow

Usage

panel-example.svelte

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 Svelte Flow's panel system

Props

position?

'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' - Position of the panel on the canvas.

className?

string - Additional CSS classes to apply to the panel.

[...props]

ComponentProps<typeof Panel> - Any other props from @xyflow/svelte Panel component.

Multiple Panels

multi-panel.svelte