Vertical and nested panel groups

Groups can run in either direction, and a Panel can contain a whole new Group, which is how editor-plus-terminal layouts are built.

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

Vertical and nested panel groups: 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

Choose the orientation. The inner Group sets orientation="vertical", so its panels stack top to bottom and its separator is horizontal. [1]
Nest a Group inside a Panel. The right Panel of the outer group contains the vertical group. Panels and Separators stay direct children of their own Group. [1]
Size the separators per direction. The vertical separator is a wide, short bar (.hbar), while the outer one is tall and narrow (.vbar). [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 } 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 });
const css = '.vbar{width:8px;background:#2c303a;border-radius:4px}.hbar{height:8px;background:#2c303a;border-radius:4px}' +
  '.vbar:hover,.hbar:hover{background:#3b82f6}';

export default function App() {
  return (
    <div style={{ width: 560, height: 300, margin: '32px auto', padding: 8, boxSizing: 'border-box', background: '#1b1d23', borderRadius: 12 }}>
      <style>{css}</style>
      <Group style={{ height: '100%' }}>
        <Panel id="sidebar" defaultSize="30%">
          <div style={pane('#264653')}>Sidebar</div>
        </Panel>
        <Separator className="vbar" />
        <Panel id="main" defaultSize="70%">
          <Group orientation="vertical" style={{ height: '100%' }}>
            <Panel id="code" defaultSize="65%">
              <div style={pane('#2a3d66')}>Code</div>
            </Panel>
            <Separator className="hbar" />
            <Panel id="terminal" defaultSize="35%">
              <div style={pane('#3d3d3d')}>Terminal</div>
            </Panel>
          </Group>
        </Panel>
      </Group>
    </div>
  );
}

Ctrl/⌘ + Enter runs

Drag the vertical bar to resize the sidebar, and the horizontal bar to resize the terminal. 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 Collapsible panels in react-resizable-panels 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 →