Introduction
dashfoo is a headless React docking-layout library: tiled, resizable, tabbed regions with a serializable model and zero imposed styling.
dashfoo builds VS-Code-style dashboards in React: nested rows and columns of
resizable panes, each pane a tabset you can restack, split, and reorder by
dragging, plus rename, close, maximize, and in-app floating panels. The layout is a single serializable
model (a plain object validated by zod) that is the one source of truth. The engine
ships structure, not appearance: @dashfoo/react renders markup tagged with
data-dashfoo="..." attributes and applies structural positioning styles but no visual theme, so the chrome is yours to
style (or import the optional @dashfoo/theme skin).
Try the hosted demo at demo.dashfoo.com.
This is an MIT-licensed early-adopter release for React 18.3 and 19. Report bugs and questions through GitHub Issues.
At a glance
- Headless.
@dashfoo/reactrendersdata-dashfoomarkup without an imposed visual theme. Target it with your own CSS, or drop in@dashfoo/theme, a skin over overridable--dashfoo-*tokens, light by default with opt-in dark viadata-dashfoo-theme="dark", consumable as a Tailwind v4 entry or prebuilt plain CSS. - Model is the source of truth. A plain, JSON-serializable object validated
by
dashfooSchema.toJSON/fromJSONround-trip it losslessly because content never lives in the model, only acomponentregistry key. - Controlled or uncontrolled. Pass
defaultModeland let the engine own state with built-in undo/redo, or passmodel+onModelChangeand own persistence yourself. Same model shape either way. - Pointer drag-docking. Drag a tab to stack, split, or dock to an edge, with
a live insertion-line / split-zone indicator. Built on the framework-agnostic
@dnd-kit/domcore.
The packages
| Package | Purpose |
|---|---|
@dashfoo/core | Pure-TS engine: zod schema + derived types, the reducer, tree invariants, geometry, undo/redo, serialize, model builders. No React. |
@dashfoo/react | DashfooLayout, the Panel helper, the persist prop, hooks, and the resize / drag adapters. Headless data-dashfoo markup. |
@dashfoo/theme | The opt-in default skin over --dashfoo-* tokens, light by default + opt-in dark. Tailwind v4 entry (with dashfoo-* utilities) or prebuilt plain CSS. |
Where to go next
- Getting started: install, build a model with the builders, render
<DashfooLayout>, and make it visible. - Hosted demo: try the demo app before wiring dashfoo into your own UI.
- The layout model: the node schema, the builders, and how
normalize()keeps the tree canonical. - Drag and dock: how stack/split resolution works (pointer-only).
- Controlled mode & undo/redo: the two modes, history, and the interception hooks.
- Persisting layouts: the
persistprop, storage adapters, and SSR. - Adaptive layouts: stack and lock the layout on narrow screens with the
responsiveprop; the layout keeps its state without a remount. - Theming: the full
data-dashfoo+--dashfoo-*contract and the dark theme. - Floating panels: float, minimize, resize, and dock back in the same app.
- Build your own layout: compose the chrome from public parts.
- API reference: every exported component, hook, prop, and type in one place.
Code in these docs comes from the dashfoo repository: the package sources, the demo app, and the test suite.