Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Floating panel

A small window that floats over the page and stays out of the way: notes beside a record, an assistant beside a form. Drag it, resize it, shrink it to its title bar or let it fill the space.

Pro
pnpm dlx shadcn@latest add @caliper/floating-panel

INV-2041 · Forma

Drag the notes by their title; resize from the corner.

Design retainer, October€8,400.00
Usability study, 6 sessions€2,880.00
Travel€1,200.00
Total€12,480.00
Notes · INV-2041
Arrow keys move the panelArrow keys resize the panel
  • Travel billed at cost, receipts attached.
  • Ask Elias about the 30-day terms.
Installs components/ui/floating-panel.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source

When to use

Use it for

  • Side work that should stay open while people use the page behind.
  • Tools people place themselves: notes, a calculator, a preview.

Skip it when

  • Anything that needs an answer before going on; use a dialog.
  • Content that belongs in the layout; use a sheet or resizable panels.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Kept in bounds
It stays inside its positioned parent while dragging, resizing and when the parent changes size.
Keys for the handles
The title is a move handle and the corner a resize handle; both take the arrow keys, Shift for 40px.

Usage

Non-modal
It is a dialog without a modal trap, so the page behind still works; Escape closes it when it can be closed.

Installation

terminal
pnpm dlx shadcn@latest add @caliper/floating-panel

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { FloatingPanel } from "@/components/ui/floating-panel"

The worked example comes with Pro

The 55-line example behind the preview opens here, ready to copy.

  • 576 Pro parts, blocks and page templates, all with source
  • $199 once, with a year of updates. What you have stays yours
  • A full refund within 14 days if it is not for you
Checking your licence…

API reference

FloatingPanel

component
PropTypeDefaultDescription
title *string—
children *ReactNode—
openbooleantrue
onOpenChange((open: boolean) => void)—
defaultBoxBox{ x: 24, y: 24, w: 320, h: 260 }Where it starts, in pixels inside its parent.
minSize{ w: number; h: number; }{ w: 220, h: 140 }
classNamestring—

Accessibility

It exposes dialog and button semantics, with aria-modal, aria-labelledby, aria-roledescription, aria-describedby, aria-label and aria-expanded kept in step with state.

KeyBehaviour
EscapeCloses or cancels, then returns focus to where it came from.

Motion

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.

All Panels examples