react-resizable-panels

Resizable panel group layouts for React — drag handles between panels with keyboard support and persistent sizing.

react-resizable-panels

React

Resizable panel group layouts for React — drag handles between panels with keyboard support and persistent sizing.

npm GitHub Docs

Fit

Bundle (gzip)

11.0 kB

33.5 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

IDE-style split-pane layouts need mouse drag, keyboard resize, minimum/maximum size constraints, and persistence of panel sizes across page loads — building this robustly takes significant effort.

What It Does

PanelGroup and Panel components wrap your content, and PanelResizeHandle renders a draggable divider. Panels respect minSize/maxSize constraints, fire onResize callbacks, and can be controlled programmatically for auto-collapse/expand.

Installation

bash

npm install react-resizable-panels

Usage Example

tsx

import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';

export function IDE() {
  return (
    <PanelGroup direction="horizontal" style={{ height: '100vh' }}>
      <Panel defaultSize={20} minSize={10}>
        <div className="sidebar">File Tree</div>
      </Panel>
      <PanelResizeHandle className="w-1 bg-gray-200 hover:bg-blue-400 cursor-col-resize" />
      <Panel>
        <div className="editor">Editor</div>
      </Panel>
    </PanelGroup>
  );
}

Related packages

cmdkReact

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

@dnd-kit/coreReact

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

embla-carousel-reactReact

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

flagsReact

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

framer-motionReact

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.