All components
Floating Panel
Draggable utility windows with a drag handle, title bar, and scrollable body.
Console
▲ build completed in 412ms
✓ 128 rules compiled
✓ 0 warnings
Install
zsh — floating-panel
1bunx stylexblocks add floating-panelUsage — Ark UI
floating-panel.tsx
12345678910111213141516171819202122232425import { FloatingPanel } from "#components/ui/ark-ui/floating-panel.tsx";import { Button } from "#components/ui/ark-ui/button.tsx";
export function Example() { return ( // dragging, resizing, and stage transitions come from Ark's machine; // the positioner portals to <body> above the page <FloatingPanel.Root defaultPosition={{ x: 120, y: 160 }} defaultSize={{ width: 280, height: 180 }}> <FloatingPanel.Trigger asChild> <Button variant="surface">Open panel</Button> </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> );}