Collapsible panels in react-resizable-panels

A collapsible panel snaps shut when dragged below its minimum size, which is a common pattern for sidebars and inspectors.

All react-resizable-panels examples react-resizable-panels: usage and stats

Collapsible panels in react-resizable-panels: screenshot of the example below running — The code below, running in Chromium on our server (Oct 12, 2026). Press Run to see it live and change it.

How it works

Make the panel collapsible. The sidebar has collapsible and minSize="20%". Dragging it narrower than that collapses it. [1]
Keep a sliver visible. collapsedSize="6%" leaves a thin strip showing when collapsed instead of hiding it completely. [1]
Collapse from code. usePanelRef() creates a ref passed as panelRef. The button calls isCollapsed(), then collapse() or expand(). [1]

Run and edit it

It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.

import { Group, Panel, Separator, usePanelRef } from 'react-resizable-panels';

const pane = (bg) => ({ height: '100%', background: bg, color: '#f1f1f1', display: 'grid',
  placeItems: 'center', font: '14px system-ui, sans-serif', borderRadius: 8 });

export default function App() {
  const sidebar = usePanelRef();
  const toggle = () => {
    const p = sidebar.current;
    if (p) p.isCollapsed() ? p.expand() : p.collapse();
  };
  return (
    <div style={{ width: 560, margin: '24px auto', fontFamily: 'system-ui, sans-serif' }}>
      <button onClick={toggle} style={{ marginBottom: 10, padding: '6px 14px', borderRadius: 8,
        border: 'none', background: '#3b82f6', color: '#fff', cursor: 'pointer' }}>Toggle sidebar</button>
      <div style={{ height: 270, padding: 8, boxSizing: 'border-box', background: '#1b1d23', borderRadius: 12 }}>
        <Group style={{ height: '100%' }}>
          <Panel id="sidebar" panelRef={sidebar} collapsible collapsedSize="6%" minSize="20%" defaultSize="30%">
            <div style={pane('#264653')}>Sidebar</div>
          </Panel>
          <Separator style={{ width: 8, background: '#2c303a', borderRadius: 4 }} />
          <Panel id="content">
            <div style={pane('#2a3d66')}>Content</div>
          </Panel>
        </Group>
      </div>
    </div>
  );
}

Ctrl/⌘ + Enter runs

Click the button or drag the bar far to the left to collapse the sidebar. Code written by AgentGid [1].

Checked Oct 12, 2026: it starts without errors in Chromium with react-resizable-panels 4.14.4, react 19.3.0, react-dom 19.3.0. Needs WebGL.

More react-resizable-panels examples

Horizontal resizable panels with react-resizable-panels Vertical and nested panel groups Size limits and resize events Reading and restoring a panel layout

Sources

react-resizable-panels README (GitHub)

Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.

Building something with react-resizable-panels? Ask AgentGid →