All components
Floating Panel
Draggable utility windows with a drag handle, title bar, and scrollable body.
Install
zsh — floating-panel
1bunx stylexblocks add floating-panelUsage — Base UI
floating-panel.tsx
123456789101112131415161718192021222324252627import { FloatingPanel } from "#components/ui/base-ui/floating-panel.tsx";import { Button } from "#components/ui/base-ui/button.tsx";
// Base UI ships no floating-panel machine — this is the recipe composed in// Base UI's idiom: useRender parts around controlled open/position state.// The positioner portals to <body>; the drag trigger moves the window with// pointer capture.export function Example() { return ( <FloatingPanel.Root defaultPosition={{ x: 120, y: 160 }}> <FloatingPanel.Trigger render={<Button variant="surface" />}> Open panel </FloatingPanel.Trigger> <FloatingPanel.Positioner> <FloatingPanel.Content> <FloatingPanel.Header> <FloatingPanel.DragTrigger> <FloatingPanel.Title>Console</FloatingPanel.Title> </FloatingPanel.DragTrigger> <FloatingPanel.CloseTrigger aria-label="Close">×</FloatingPanel.CloseTrigger> </FloatingPanel.Header> <FloatingPanel.Body>build completed in 412ms</FloatingPanel.Body> </FloatingPanel.Content> </FloatingPanel.Positioner> </FloatingPanel.Root> );}