Skip to main content

Allotment

Resizable split panes for React, derived from VS Code

This is Allotment. Drag the edges, double-click them to reset, and use the buttons in the title bar to show and hide panes.

Get startedExamples
$ npm install allotment

Up and running in a minute

  1. Install allotment. It works with React 17, 18 and 19.
  2. Import the component and its stylesheet, allotment/dist/style.css.
  3. Put your panes inside Allotment, in a parent with a height.
Read the getting started guide →
import { Allotment } from "allotment";
import "allotment/dist/style.css";

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

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 →