Allotment

React split-pane component.

Docs · Examples · API · Changelog

• React-based: Integrate effortlessly into your existing React-based application.
• Industry standard look and feel: Like VS Code's split view implementation? You're in luck! This component is derived from the same codebase.
• Dynamic: Want to declaratively add and remove panes? We've got you covered.
• Flexible: Snap panes closed, nest split views, show and hide panes, and persist sizes across reloads.
• Typed: Written in TypeScript, with type definitions included.

Quick start

npm install allotment

Allotment requires React 17, 18 or 19 (react and react-dom are peer dependencies).

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

export const App = () => (
  <div style={{ height: 400 }}>
    <Allotment>
      <div>Pane A</div>
      <div>Pane B</div>
    </Allotment>
  </div>
);

Allotment fills its parent element, so make sure the parent has a height. See the FAQ if nothing is showing.

Documentation

The documentation has live examples of everything Allotment can do.

• Getting started
• Features: layout, sizing, snapping, nesting, adding and removing panes, visibility and reset and resize
• How-to guides: styling, persisting sizes and server rendering and Next.js
• API: overview, Allotment and Allotment.Pane
• FAQ

Alternatives

Allotment aims to reproduce the behaviour of VS Code's split view. If you need something different, react-resizable-panels is a popular alternative.

Contributing

Contributions are welcome! See the contributing guide to get started, and please follow the Code of Conduct.

Notable changes are recorded in the changelog.

License

Allotment is released under the MIT License.