Resizable Panels

Interactive panels that can be resized by dragging the resizer handles. Works with both horizontal and vertical layouts.

Horizontal Resizing#

Left PanelDrag to resize →Min: 100px

Main ContentFlexible width

Right Panel← Drag to resizeMax: 300px

import { Panel, Resizer } from '@split-ui/react';

export default function HorizontalResizableDemo() {
  return (
    <Panel group>
      <Panel initialSize="200px" minSize="100px" className="demo-panel">
        Left Panel
        <small>Drag to resize →</small>
        <small>Min: 100px</small>
      </Panel>
      <Resizer />
      <Panel className="demo-panel">
        Main Content
        <small>Flexible width</small>
      </Panel>
      <Resizer />
      <Panel initialSize="150px" maxSize="300px" className="demo-panel">
        Right Panel
        <small>← Drag to resize</small>
        <small>Max: 300px</small>
      </Panel>
    </Panel>
  );
}

Vertical Resizing#

Top PanelDrag to resize ↓Min: 60px

Middle ContentFlexible height

Bottom Panel↑ Drag to resizeMax: 150px

import { Panel, Resizer } from '@split-ui/react';

export default function VerticalResizableDemo() {
  return (
    <Panel group orientation="vertical">
      <Panel initialSize="100px" minSize="60px" className="demo-panel">
        Top Panel
        <small>Drag to resize ↓</small>
        <small>Min: 60px</small>
      </Panel>
      <Resizer />
      <Panel className="demo-panel">
        Middle Content
        <small>Flexible height</small>
      </Panel>
      <Resizer />
      <Panel initialSize="80px" maxSize="150px" className="demo-panel">
        Bottom Panel
        <small>↑ Drag to resize</small>
        <small>Max: 150px</small>
      </Panel>
    </Panel>
  );
}

Iframe Integration#

Controls PanelDrag to resize →Min: 200px✨ Dragging over iframe works!

import { Panel, Resizer } from '@split-ui/react';

export default function IframeDemo() {
  return (
    <Panel group>
      <Panel initialSize="300px" minSize="200px" className="demo-panel">
        Controls Panel
        <small>Drag to resize →</small>
        <small>Min: 200px</small>
        <small>✨ Dragging over iframe works!</small>
      </Panel>
      <Resizer />
      <Panel className="demo-panel" style={{ padding: 0 }}>
        <iframe
          src="https://example.com"
          style={{
            width: '100%',
            height: '100%',
            border: 'none',
          }}
          title="Example Website"
        />
      </Panel>
    </Panel>
  );
}