A resizable split-panel container. The two panels are separated by a draggable divider. Supports vertical (side-by-side) and horizontal (stacked) orientations, touch events, and keyboard navigation.
Panels sit side by side. Focus the divider and use ← / → arrow keys to resize by 1% per press. Hold Shift for 10% steps.
Left Panel
Drag the divider to resize. You can also focus it and use arrow keys.
Right Panel
The right panel fills the remaining space.
Set orientation="horizontal" to stack panels vertically. Arrow keys become ↑ / ↓.
Top Panel
Horizontal orientation — panels stack vertically.
Bottom Panel
Drag the horizontal divider to resize.
Override the divider width/style via the class prop. Use onresize to track current panel sizes.
Sidebar
Item 1
Item 2
Item 3
Content
Panel sizes: 30.0% / 70.0%