Skip to content
fr

The chassis of a tool application, in 8 kB

panels

panels is a React library by Alban Pasquelin providing the chassis of a tool application — icon rails, resizable zones, a free centre with draggable tabs — in 8 kB gzipped, with zero dependencies, MIT licensed.

import { TypeScript, React, HeadlessUI } from '@/stack'
export function (layout: WorkbenchLayout): PanelTree {

Every tool application looks the same: icon rails down the sides, panels you resize, and tabbed documents in the middle that you drag around. Everyone rewrites it, badly, on every project.

<Panels rails={[leftIcons, rightIcons]} center={<Documents tabs />} />

panels supplies that chassis once and for all. It is headless: the mechanics come with it, the appearance stays yours.

const chassis = headless(Panels) /** mechanics included, appearance yours **/

8 kB gzipped, zero dependencies, MIT. The weight is a design decision, not an accident.

expect(gzipSize).toBe('8 kB'); expect(dependencies).toHaveLength(0)
return {
gzipped: '8 kB', /** gzipped **/
dependencies: 0, /** dependencies **/
licence: 'MIT', /** licence **/
}
}
The chassis comes apartThe zones of a tool application — rails, panels, centre — come apart and reassemble. That is everything the library does, in 8 kB.

Projects