A headless foundation for building animated, resizable application layouts in React.
Resizable panel primitives
PanelGroup,Panel,PanelResizeHandle, and an optionalPanelProviderfor building docked and peer panel layouts with pointer, touch, and keyboard resizing. A standalonePanelGroupinstalls an implicit provider, so the explicitPanelProvideris only needed to share state across groups.Docked and peer layouts
Docked and peer panels with nested groups and per-axis relative sizing. Docked panels collapse animated, instantly, or to a
collapsedSizerail, andcollapseBelowthresholds close a panel mid-drag with hysteresis and a configurable close behavior.Animation control
A group-level
animationprop disables all library-owned transitions or overrides the default 300ms duration and easing per group.Drag cascades
Sibling drag cascades with a
cascadeprop choosing mid-drag reversal semantics —"reversible"retraces the cascade exactly,"latching"keeps far panels pushed until released space reaches them. Per panel,disabledblocks all resizing andpinnedexempts a docked panel from other handles' cascades.Container resize behavior
A per-panel
containerResizeBehavior("fixed"or"proportional") decides how expanded panels respond when the group's container changes size.Group value model
A
PanelGroupValuestate model with controlled and uncontrolled modes.onValueChangereports reason and trigger metadata, and is kept separate from the pointer resize lifecycle exposed throughonResizeStartandonResizeEnd.Imperative API and hooks
Imperative
apiRefcontrollers (PanelApi,PanelGroupApi) alongside locator-keyed hooks:usePanelControls,usePanelActions,usePanelRegistry,usePanelCollapsed,usePanelInteractionState, andusePanelGroupState. Action results are authoritative and report the value the group actually accepted.Persistence
A grouped
persistenceoption with read, deserialize, and write error reporting plus restore-status callbacks.SizeSpec grammar
A strict, CSS-compatible
SizeSpecgrammar with field-specific fallbacks and development-only diagnostics.Accessibility
Handles implement the ARIA separator pattern (
aria-valuenow,min,max,aria-controls,aria-orientation) and resize with the arrow keys,Home, andEnd, at full parity with pointer gestures.RTL and SSR
Right-to-left layouts via
dir="rtl"on the group, touch and pointer input, and SSR-safe rendering.
Built for React 18 and 19, with zero runtime dependencies — tree-shakeable ESM with CI-enforced bundle-size budgets. Under 0.x, minor versions may carry breaking changes; the stable-contract intent is enforced by the packed type-contract tests rather than by a 1.0.0 major.