React Resizable Split Pane
The layout you reach for whenever two things share a screen and one deserves more room than the other — a file list and an editor, a form and a preview, a list and its detail. Drag the divider to reapportion; it remembers where you left it.
export function AppShell() {
// drag the divider to resize →
return null;
}Drag the divider to reapportion, or focus it and use ← →. Try Shift+Arrow for larger steps.
Installation
Props
| Prop | Type | Description |
|---|---|---|
| direction | "horizontal" or "vertical" | Side-by-side or stacked |
| defaultSplit | number | Initial size of the first pane (%) |
| min / max | number | Percentage bounds for the first pane |
| children | [ReactNode, ReactNode] | The two panes |
A separator, not just a draggable bar
The divider is a real role="separator" with aria-valuenow and full keyboard control — arrow keys nudge it, Shift+arrow moves in larger steps, Home and End snap to the bounds. A split you can only adjust with a mouse is a split a keyboard or switch user cannot adjust at all, and layout controls are exactly where that exclusion bites. The hit area is wider than the 1px line it draws, so grabbing it never requires pixel precision, and the body cursor and text-selection lock while dragging so a fast drag doesn't select the content underneath.
Bounds keep either pane from collapsing to nothing by accident. Set direction="vertical" for a stacked split — same interaction, rotated — and nest two split panes for a three-region IDE layout.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.