Decision. For a grid-and-form side-by-side that needs nested/collapsible splits, min/max constraints, an imperative resize API and persistence, use react-resizable-panels ⭐ 5.3k — unstyled, accessible, zero-dependency, the de-facto standard [1][2]. Pick Allotment ⭐ 1.3k only when you want a VS Code look-and-feel with snap-to-zero and styled sashes out of the box and can accept 6 transitive deps + browser-only rendering [5]. react-split-pane ⭐ 3.4k got a 2026 v3 rewrite (React 19, TypeScript) — viable for simple splits but a smaller ecosystem [8][9]. re-resizable ⭐ 2.7k solves a different problem — resizing one element by its edges, not dividing siblings [10].
Comparison
| Axis | react-resizable-panels ⭐ 5.3k | Allotment ⭐ 1.3k |
|---|---|---|
| Model | Flexbox %/px, sibling panes + handle [1] | VS Code sash engine (same codebase) [5] |
| Nested splits | ✓ nest Group in Panel [2] |
✓ nest <Allotment> in a pane [5] |
| Collapsible | ✓ collapsible + collapsedSize [2] |
✓ via snap / visible prop [5] |
| Snapping | ✗ none [4] | ✓ snap-to-zero snap prop [7] |
| Min/max | ✓ minSize/maxSize, px/%/rem [2] |
✓ minSize/maxSize per pane [5] |
| Imperative API | ✓ resize/collapse/expand/getSize + Group getLayout/setLayout [13] |
✓ ref reset() / resize([sizes]) [5] |
| Persistence hook | useDefaultLayout + defaultLayout + onLayoutChanged [4] |
manual: onChange → your store [5] |
| Styling effort | high — ships unstyled, you style handles [2] | low — ships CSS + CSS vars (--separator-border) [5] |
| Keyboard / ARIA | ✓ ARIA separator, keyboard resize [2] |
weaker — sash-focused, not emphasized [5] |
| SSR | ✓ expanded incl. Server Components (v4) [4] | ✗ browser-only; Next.js needs dynamic import [5] |
| TypeScript | full types shipped [2] | authored in TS (~83%) [5] |
| Bundle (gzip) | 10.8 kB, 0 deps [14] | 9.4 kB, 6 deps [14] |
| Latest / activity | v4.12.2, pushed Jul 2026, 3 open issues [3] | v1.20.5, last publish Dec 2025, ~100 open issues [6] |
| Downloads/wk | ~33.7M (rides shadcn/ui) [11] | ~171k [6] |
| License | MIT [2] | MIT [5] |
When to pick which
react-resizable-panels — the default. Flexbox percentage model fits app shells and dashboards (grid on one side, form on the other), nests cleanly, and its imperative handle lets you collapse the form panel or restore a saved layout from a button [13]. Persistence is a hook, not magic: useDefaultLayout seeds defaultLayout and you persist via onLayoutChanged — more wiring than v3’s one-line autoSaveId, but you control the storage [4]. Cost: it ships unstyled, so you build the drag-handle visuals yourself [2]. The 33.7M weekly downloads are largely shadcn/ui’s Resizable wrapper depending on it [11] — if you use shadcn you already have it.
⚠ v4 is a breaking rename. PanelGroup→Group, PanelResizeHandle→Separator, direction→orientation, and internal data-* attributes moved to aria-*; shadcn/ui’s Resizable broke on the bump [12]. Most tutorials still show the v3 PanelGroup/PanelResizeHandle API — check which major you install [4].
Allotment — reach for it when you want an IDE feel with the least CSS. It is derived from VS Code’s split-view code, so styled sashes, proportional layout, snap-to-zero and double-click-to-reset all work out of the box [5][7]. Snapping is its standout feature react-resizable-panels lacks [4]. Trade-offs: it is browser-only (Next.js needs dynamic(..., { ssr:false })), pulls 6 transitive deps, carries ~100 open issues, and shipped its last release in Dec 2025 — slower cadence than react-resizable-panels [5][6]. “Heavier and more opinionated” than the alternatives if you only need a two-column split [1].
Alternatives, briefly
react-split-pane ⭐ 3.4k — long the “legacy” answer (the abandoned 0.1.x line), it received a v3.2.0 rewrite in Feb 2026: React 17/18/19 peer deps, TypeScript-first, hooks-based, 3.8 kB gzip, 0 deps [8][9]. No longer dead, but ~201k downloads/wk and a thinner feature set (no built-in collapse/snap parity) [11]. Fine for a plain draggable divider; react-resizable-panels remains the safer default for anything richer.
re-resizable ⭐ 2.7k — not a splitter. It resizes a single element via edge/corner handles (drag a card or panel bigger), not the boundary between two siblings that a grid-vs-form layout needs [10]. Popular (~2M downloads/wk) and maintained, but wrong tool for this job — use it for individually resizable widgets, not screen division.
Also seen: split.js (framework-neutral, tiny, but you supply persistence/accessibility/ergonomics yourself) [1], and newer entrants like react-resplit. None displace react-resizable-panels as the React default in 2026.