Resizable
Draggable split panels for resizable layouts.
resizable-demo.app
Left
Right
Installation
terminal.sh
npx y2kui@latest add resizableUsage
import {
ResizablePanelGroup,
ResizablePanel,
ResizableHandle,
} from "@/components/ui/resizable"
<ResizablePanelGroup orientation="horizontal" className="h-64">
<ResizablePanel defaultSize={50}>Left</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize={50}>Right</ResizablePanel>
</ResizablePanelGroup>Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | — | Layout orientation. |
ResizablePanel.defaultSize | number | — | Initial size percentage. |
ResizableHandle.withHandle | boolean | false | Show a drag handle. |