@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.
Same markup, five themes:See the code →
Behaviour
Resize, drag and drop between tabsets and to the edges, popout windows, maximize, undo/redo.
Accessibility
The APG tabs pattern, keyboard splitters with ARIA values, focus management, layout paths for tests.
A JSON model
The layout is data: load it, save it, intercept every change with onAction.
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.