Allotment

Used in over 1,700 repositories on GitHub, including

Up and running in a minute

Install allotment. It works with React 17, 18 and 19.
Import the component and its stylesheet, allotment/dist/style.css.
Put your panes inside Allotment, in a parent with a height.

import { Allotment } from "allotment";
import "allotment/dist/style.css";

export const App = () => (
  <div style={{ height: 400 }}>
    <Allotment>
      <Sidebar />
      <Editor />
    </Allotment>
  </div>
);

Props at a glance

`Allotment`

Prop	Default	Description
`vertical` boolean	`false`	Stack panes vertically instead of horizontally.
`defaultSizes` number[]		Initial sizes of the panes, scaled to fit.
`minSize` number	`30`	Minimum size of any pane.
`maxSize` number	`Infinity`	Maximum size of any pane.
`snap` boolean	`false`	Let every pane snap closed.
`onChange` (sizes: number[]) => void		Called when the pane sizes change.

Full Allotment reference →

`Allotment.Pane`

Prop	Default	Description
`minSize` number		Minimum size of this pane.
`maxSize` number		Maximum size of this pane.
`preferredSize` number \| string		Size on mount and reset, e.g. 120 or "50%".
`snap` boolean	`false`	Let this pane snap closed.
`visible` boolean	`true`	Whether this pane is shown.
`priority` LayoutPriority	`Normal`	Which panes resize first when the layout changes.

Full Allotment.Pane reference →

Derived from VS Code

Built on the same split view code as VS Code, so dragging, snapping and double-click to reset feel the way people expect.

Declarative

Add, remove and hide panes by changing your React children. Allotment works out the new sizes.

Closable panes →

Size constraints

Set minimum, maximum and preferred sizes per pane, fix a pane's size, or let it snap closed.

Sizing →

Nested layouts

Put one Allotment inside another to build editor-style layouts with sidebars and panels.

Nested →

TypeScript

Written in TypeScript and ships its own types, including the ref handle for resizing from code.

API reference →

Easy to style

Change colours and sash sizes with CSS variables, or target the component's class names.

Styling →