Resizable split panes in React (2026): react-resizable-panels vs Allotment — Scorecard

Verdict

react-resizable-panels takes the default slot.

Unstyled, accessible, zero-dependency and the de-facto standard for app-shell splits. Reach for Allotment 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 plus browser-only rendering. ^[1] ^[5]

The two contenders

stars · bundle · deps · license

Winner

react-resizable-panels

The default · app-shell splits

GitHub

⭐ 5.3k

Bundle (gzip)

10.8 kB

Dependencies

zero-dep

License

MIT

Latest

v4.12.2

Jul 2026 · 3 open

Downloads/wk

~33.7M

rides shadcn/ui

Axis wins 8 / 11

Allotment

The IDE feel · least CSS

GitHub

⭐ 1.3k

Bundle (gzip)

9.4 kB

Dependencies

transitive

License

MIT

Latest

v1.20.5

Dec 2025 · ~100 open

Downloads/wk

~171k

niche

Axis wins 3 / 11

Axis-by-axis scoreboard

★ = capability grade · ● = axis winner

Axis

react-resizable-panels

Allotment

Model

flexbox %/px, sibling panes + handle vs VS Code sash engine

★★★

flexbox

★★★

VS Code sash

Nested splits

nest a Group / Allotment inside a pane

★★★

✓ Group in Panel

★★★

✓ nested Allotment

Collapsible

panel collapses to a rail or zero

★★★

collapsible + collapsedSize

★★★

via snap / visible

Snapping

snap-to-zero when dragged near an edge

★★★

✗ none

★★★

✓ standout feature

Min / max

per-pane size clamps in px/%/rem

★★★

minSize / maxSize

★★★

minSize / maxSize

Imperative API

resize / collapse from a ref

★★★

resize/collapse/expand + getLayout

★★★

reset() / resize([sizes])

Persistence hook

serialize + restore a saved layout

★★★

useDefaultLayout + onLayoutChanged

★★★

manual: onChange → store

Styling out of box

how much CSS you write yourself

★★★

unstyled — you build handles

★★★

ships CSS + CSS vars

Keyboard / ARIA

accessible separators, keyboard resize

★★★

ARIA separator + keyboard

★★★

weaker, sash-focused

SSR

renders server-side / Server Components

★★★

✓ incl. Server Components (v4)

★★★

✗ browser-only

Activity / cadence

release freshness & open-issue load

★★★

pushed Jul 2026

★★★

last publish Dec 2025

⚠

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 API — check which major you install. ^[4]

When to pick which

react-resizable-panels ⭐ 5.3k

Pick when — app shells & dashboards

+Flexbox percentage model fits grid-on-one-side, form-on-the-other layouts and nests cleanly.
+Imperative handle collapses the form panel or restores a saved layout from a button. ^[13]
+You control storage: useDefaultLayout seeds the layout, you persist via onLayoutChanged.
−Ships unstyled — you build the drag-handle visuals yourself. ^[2]
−No snapping at all. ^[4]

Allotment ⭐ 1.3k

Pick when — you want IDE feel, least CSS

+Derived from VS Code split-view: styled sashes, proportional layout, snap-to-zero and double-click-reset all work out of the box. ^[7]
+Snapping is its standout feature — the one react-resizable-panels lacks.
−Browser-only: Next.js needs dynamic(…, { ssr:false }).
−Pulls 6 transitive deps and carries ~100 open issues. ^[6]
−Slower cadence — last release Dec 2025. ^[5]

On the bench

also-rans — right idea, wrong fit

react-split-pane

⭐ 3.4k

Viable · simple splits

Long the "legacy" answer, but a v3.2.0 rewrite landed Feb 2026 — React 17/18/19, TypeScript-first, hooks-based. Fine for a plain draggable divider; thinner feature set (no built-in collapse/snap parity) and a smaller ecosystem. ^[8] ^[9]

3.8 kB gzip · 0 deps · MIT · ~201k dl/wk

re-resizable

⭐ 2.7k

Wrong tool · not a splitter

Resizes a single element via edge/corner handles — not the boundary between two siblings a grid-vs-form layout needs. Popular and maintained, but use it for individually resizable widgets, not screen division. ^[10]

~2M dl/wk · MIT · edge-handle resize