Resizable
Split layouts with draggable dividers. Sizes are kept as percentages and applied as flex weights, so columns always fill the group exactly and stay proportional when the window resizes. Each handle is a real role=separator: drag it, or focus it and use the arrow keys to move the split.
Main
This panel omits defaultSize, so it takes the leftover space and absorbs the changes as the others resize.
Aside
Each panel clamps to its own minSize / maxSize.
<ResizablePanelGroup direction="horizontal"> <ResizablePanel defaultSize={26} minSize={15}> {/* rail */} </ResizablePanel> <ResizableHandle withHandle /> <ResizablePanel minSize={30}> {/* main */} </ResizablePanel> <ResizableHandle withHandle /> <ResizablePanel defaultSize={28} minSize={18}> {/* aside */} </ResizablePanel></ResizablePanelGroup>Parts
| Prop | Type | Default | Notes |
|---|---|---|---|
ResizablePanelGroup | container | 'horizontal' | Lays panels out in a row or column via the direction prop. Alternate panels and handles as children. |
ResizablePanel | container | — | One region. Set defaultSize (percent); omit it to share leftover space. Put a Panel or any content inside. |
ResizableHandle | element | — | The draggable divider. Pass withHandle for a visible grip and aria-label to name it. |
Sizing props
| Prop | Type | Default | Notes |
|---|---|---|---|
defaultSize | number | — | Initial size as a percentage of the group. Panels that omit it split the remainder equally. |
minSize | number | 5 | Smallest size, in percent. |
maxSize | number | 100 | Largest size, in percent. |