Draggable split panes for resizable layouts.
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@cooud-ui/ui";
npx cooud-ui add resizable
Generated from the component's exported types.
Extends ComponentProps<typeof ResizablePrimitiveHandle>
| Prop | Type | Default | Description |
|---|---|---|---|
withHandle | boolean | false | Render a centered grip affordance on the divider. Defaults to `false`. |
On this page
Drag the divider to resize. A horizontal group nests a vertical one for a three-pane layout.
<ResizablePanelGroupdirection="horizontal"className="h-48 max-w-2xl rounded-lg border border-border"><ResizablePanel defaultSize={35} minSize={20}><div className="flex h-full items-center justify-center p-4 text-sm text-fg-secondary">Sidebar</div></ResizablePanel><ResizableHandle withHandle /><ResizablePanel defaultSize={65}><ResizablePanelGroup direction="vertical"><ResizablePanel defaultSize={60}><div className="flex h-full items-center justify-center p-4 text-sm text-fg-secondary">Content</div></ResizablePanel><ResizableHandle /><ResizablePanel defaultSize={40}><div className="flex h-full items-center justify-center p-4 text-sm text-fg-secondary">Console</div></ResizablePanel></ResizablePanelGroup></ResizablePanel></ResizablePanelGroup>