Floating Panel
Draggable floating dialog window with focus trap and optional trigger guide line.
A draggable floating window for console instruments that live outside the page grid — settings palettes anchored to a gear button, tool windows, overlays. Opens next to its trigger (or at a fixed position), stays viewport-clamped while dragging, closes on Escape or an outside mousedown, and traps Tab focus until closed.
Source
"use client"
import { FloatingPanel } from "@/registry/warren/floating-panel/floating-panel"
export default function FloatingPanelDemo() {
return (
<div className="relative h-64 border-2 border-border bg-background">
{/* Static open state, no triggerRef/guide — the guide line needs a live
DOM rect and silently skips without one, so this stays SSR-safe. */}
<FloatingPanel
title="RUN WALL"
onClose={() => {}}
position={{ x: 16, y: 16 }}
className="relative"
>
<div className="flex flex-col gap-2 font-mono text-[10px] uppercase tracking-wide text-muted-foreground">
<span>CONTROLS</span>
<span>RAIL DOTS · 60 · MODE LINKED</span>
<span>GAP · 2 PX · FIT ON</span>
</div>
</FloatingPanel>
</div>
)
}
Installation
npx shadcn@latest add https://warren.eduard3v.com/r/floating-panel.jsonUsage
import { FloatingPanel } from "@/registry/warren/floating-panel/floating-panel"<FloatingPanel title="RUN WALL" onClose={() => setOpen(false)}>
<span>CONTROLS</span>
</FloatingPanel>Without a triggerRef the panel renders at position (default { x: 16, y: 16 })
and skips the connector line — SSR-safe by default. With a triggerRef, mouse-
downs on the trigger don't close the panel and focus returns to it on every
close path; guide draws an SVG leader line (solid, dotted, or dashed)
from the trigger's center to the panel's nearest edge.
API Reference
Prop
Type
Prop
Type