react-resizable-panels provides accessible, flexible split-view layouts for React without wrestling low-level pointer math yourself. It models layouts as “groups” of panels separated by resize handles, supporting horizontal or vertical orientation and mixed min/max constraints that prevent panels from collapsing unexpectedly. The library focuses on smooth interactions: dragging, double-clicking to reset, and keyboard resizing for users who rely on accessibility features. It also supports snapping, collapsed states, and layout persistence so your app can remember user preferences between sessions. Because the API is component-based, you can nest groups, render custom panel contents, and style handles to match your design system. Under the hood, it keeps measurement logic reliable across reflows and React 18 rendering patterns, making it suitable for IDE-like UIs, data dashboards, and inspector panes.
Features
- Horizontal and vertical panel groups with draggable resizers
- Min/max constraints, snapping, and optional collapsed states
- Keyboard-accessible resizing and ARIA-friendly handles
- Persistent layouts via your storage of choice for remembering user preferences
- Nestable groups for complex IDE or dashboard layouts
- Headless, styling-friendly API to match any design system