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,
AllotmentandAllotment.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.