GitHub55X

Floating Panel

Vue floating panel window that can be dragged, resized, and positioned over the main interface.

API Reference
PreviousNext

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/floating-panel.json

Usage

      
      <script setup lang="ts">
import { FloatingPanel } from "@/components/ui/floating-panel";
</script>

<template>
  <FloatingPanel.Root>
    <!-- … -->
  </FloatingPanel.Root>
</template>

Composition

      
      FloatingPanel.Root
├── FloatingPanel.Body
├── FloatingPanel.CloseTrigger
├── FloatingPanel.Content
├── FloatingPanel.Context
├── FloatingPanel.DragTrigger
├── FloatingPanel.Header
├── FloatingPanel.Positioner
├── FloatingPanel.ResizeTrigger
├── FloatingPanel.StageTrigger
├── FloatingPanel.RootProvider
├── FloatingPanel.Title
├── FloatingPanel.Trigger
├── FloatingPanel.Control

Examples

Controlled size

To control the size of the floating panel programmatically, you can pass the size onResize prop to the machine.

Controlled position

To control the position of the floating panel programmatically, you can pass the position and onPositionChange prop to the machine.

Anchor Position

Use the getAnchorPosition function to compute the initial position of the floating panel. This function is called when the panel is opened and receives the triggerRect and boundaryRect.

Open State

To control the open state of the floating panel programmatically, you can pass the open and onOpenChange prop to the machine.

Lazy Mount

To lazy mount the floating panel, you can pass the lazyMount prop to the machine.

Context

To access the context of the floating panel, you can use the useFloatingPanelContext hook or the FloatingPanel.Context component.

API

See Ark UI Floating Panel docs for full props and examples.

FiltersHover Card