Split UI

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: 15%
Main ContentFlexible width
Right Panel← Drag to resizeMax: 40%
import { Panel, Resizer } from '@split-ui/react';
import styles from './index.module.css';

export default function HorizontalResizableDemo() {
  return (
    <Panel group>
      <Panel initialSize="25%" minSize="15%" className={styles.demoPanel}>
        Left Panel
        <small>Drag to resize →</small>
        <small>Min: 15%</small>
      </Panel>
      <Resizer />
      <Panel className={styles.demoPanel}>
        Main Content
        <small>Flexible width</small>
      </Panel>
      <Resizer />
      <Panel initialSize="20%" maxSize="40%" className={styles.demoPanel}>
        Right Panel
        <small>← Drag to resize</small>
        <small>Max: 40%</small>
      </Panel>
    </Panel>
  );
}

Vertical Resizing

Top PanelDrag to resize ↓Min: 20%
Middle ContentFlexible height
Bottom Panel↑ Drag to resizeMax: 50%
import { Panel, Resizer } from '@split-ui/react';
import styles from './index.module.css';

export default function VerticalResizableDemo() {
  return (
    <Panel group orientation="vertical">
      <Panel initialSize="30%" minSize="20%" className={styles.demoPanel}>
        Top Panel
        <small>Drag to resize ↓</small>
        <small>Min: 20%</small>
      </Panel>
      <Resizer />
      <Panel className={styles.demoPanel}>
        Middle Content
        <small>Flexible height</small>
      </Panel>
      <Resizer />
      <Panel initialSize="25%" maxSize="50%" className={styles.demoPanel}>
        Bottom Panel
        <small>↑ Drag to resize</small>
        <small>Max: 50%</small>
      </Panel>
    </Panel>
  );
}

Iframe Integration

Controls PanelDrag to resize →Min: 25%✨ Dragging over iframe works!
import { Panel, Resizer } from '@split-ui/react';
import styles from './index.module.css';

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