# ResizablePanels
- **Category:** Layout (`layout`)
- **Slug:** `layout/resizable-panels`
- **Status:** stable
- **Platforms:** web
- **Import:** `import { ResizablePanels } from "@protocore/pds";`
- **Docs:** https://pds.protocore.io/components/layout/resizable-panels
> Two or more panels sharing an axis, split by hairline handles that drag with the pointer and resize with the arrow keys.
## How sizing works
Sizes are **percentages** that always conserve their pair's combined space: dragging a handle grows one neighbour and shrinks the other by the same amount, clamped so neither crosses its `minSize` / `maxSize`. Panels are laid out by flex grow-factor, so the split stays proportional as the container resizes. There is **no persistence** — `ResizablePanels` is a controlled primitive; wire `onSizesChange` to your own store if you want the layout to survive a reload.
## Props
### ResizablePanels.Root
| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `className` | `string` | no | — | — |
| `defaultSizes` | `number[]` | no | — | Initial sizes in uncontrolled mode; falls back to each panel's `defaultSize`. |
| `direction` | `enum` | no | `horizontal` | Split axis. |
| `keyboardStep` | `number` | no | `10` | Percentage points an arrow-key press moves the focused handle. |
| `onSizesChange` | `((sizes: number[]) => void)` | no | — | Fires with the next sizes array whenever a handle moves. |
| `sizes` | `number[]` | no | — | Controlled sizes (percentages, one per panel). |
| `style` | `CSSProperties` | no | — | — |
### ResizablePanels.Panel
| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `__index` | `number` | no | `0` | @internal Ordinal assigned by `Root`; do not set manually. |
| `className` | `string` | no | — | — |
| `defaultSize` | `number` | no | — | Initial size in percentage points. Missing panels share the remainder equally. |
| `maxSize` | `number` | no | `100` | Largest size this panel may grow to, in percentage points. |
| `minSize` | `number` | no | `0` | Smallest size this panel may shrink to, in percentage points. |
| `style` | `CSSProperties` | no | — | — |
### ResizablePanels.Handle
| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `__index` | `number` | no | `0` | @internal Gap ordinal assigned by `Root`; do not set manually. |
| `aria-label` | `string` | no | `"Resize panels"` | Accessible name for the separator. |
| `className` | `string` | no | — | — |
| `style` | `CSSProperties` | no | — | — |
## Examples
### Horizontal split
Compose `ResizablePanels.Root` with `Panel`s and a `Handle` between each pair. Give panels a `defaultSize` (percentage) plus `minSize` / `maxSize` bounds; drag the hairline seam or focus it and press the arrow keys.
```tsx
import { ResizablePanels, Text } from "@protocore/pds";
export default function Demo() {
return (
SOURCES
infra/vpc.tf
infra/s3.tf
services/api
INSPECTOR
Drag the hairline seam, or focus it with Tab and press the arrow keys to resize.
);
}
```
### Vertical split
Set `direction="vertical"` to stack panels top-to-bottom — the handle becomes a horizontal seam and Arrow Up / Down drive it.
```tsx
import { ResizablePanels, Text } from "@protocore/pds";
export default function Demo() {
return (
QUERY
select count(*) from sessions
where region = 'eu-central-1';