A draggable, resizable floating panel/sheet with a header handle, minimize/maximize/close controls, and eight resize edges — useful for notes widgets, inspectors, or any detachable window that floats above the page.
import FloatingPanel from "@/components/ui/floating-panel";
import { useState } from "react";
const AXES = ["n", "e", "s", "w", "ne", "se", "sw", "nw"] as const;
function Glyph({ d }: { d: string }) {
return (
<svg
width={12}
height={12}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={1.75}
aria-hidden="true"
>
<path d={d} />
</svg>
);
}
function Stage() {
return (
<FloatingPanel.Positioner>
<FloatingPanel.Content>
<FloatingPanel.DragTrigger>
<FloatingPanel.Header>
<FloatingPanel.Title>
<Glyph d="M9 5h.01M9 12h.01M9 19h.01M15 5h.01M15 12h.01M15 19h.01" />
Notes
</FloatingPanel.Title>
<FloatingPanel.Control>
<FloatingPanel.StageTrigger stage="minimized">
<Glyph d="M5 12h14" />
</FloatingPanel.StageTrigger>
<FloatingPanel.StageTrigger stage="maximized">
<Glyph d="M4 9V4h5M20 15v5h-5" />
</FloatingPanel.StageTrigger>
<FloatingPanel.StageTrigger stage="default">
<Glyph d="M15 15l-6-6M15 9v6H9" />
</FloatingPanel.StageTrigger>
<FloatingPanel.CloseTrigger>
<Glyph d="M6 6l12 12M18 6L6 18" />
</FloatingPanel.CloseTrigger>
</FloatingPanel.Control>
</FloatingPanel.Header>
</FloatingPanel.DragTrigger>
<FloatingPanel.Body>
<p>A sheet of paper you can move: drag the header, pull the rim.</p>
</FloatingPanel.Body>
{AXES.map((axis) => (
<FloatingPanel.ResizeTrigger key={axis} axis={axis} />
))}
</FloatingPanel.Content>
</FloatingPanel.Positioner>
);
}
export default function FloatingPanelControlledSizeDemo() {
const [size, setSize] = useState({ width: 400, height: 300 });
return (
<div
className="relative flex h-[32rem] w-full flex-col items-start gap-3 p-10"
style={{
background: "var(--bs-color-surface-0)",
color: "var(--bs-color-text-primary)",
}}
>
<output
style={{
fontSize: "var(--bs-font-size-sm)",
color: "var(--bs-color-text-secondary)",
}}
>
{`${size.width} × ${size.height}`}
</output>
<FloatingPanel.Root
size={size}
onSizeChange={(e: { size: { width: number; height: number } }) =>
setSize(e.size)
}
>
<FloatingPanel.Trigger>Open panel</FloatingPanel.Trigger>
<Stage />
</FloatingPanel.Root>
</div>
);
}
