@fragiola/dockable · React
Dockable panels, without a single line of CSS from us.
A headless layout manager: tabs, tabsets, splitters, drag and drop and popout windows. It ships the behaviour and the accessibility. Every pixel is yours.
Behaviour
Resize, drag and drop between tabsets and to the edges, borders, popout windows, maximize.
Accessibility
The APG tabs pattern, keyboard splitters with ARIA values, focus management, layout paths for tests.
A typed JSON model
The layout is data, typed by your registry: load it, save it, and veto or rewrite every command with middleware.
Primitives
Root, Row, TabSet, Tab, Panel, Splitter… each renders only what you give it, with render instead of asChild.
What it never ships
CSSIconsTextRendered menusA design system
The state is exposed as data-* attributes and ARIA, so any styling solution works: Tailwind, plain CSS, CSS modules, CSS-in-JS. The examples use Fragiola UI and its palettes.