# react-mosaic

> React tiling window manager (v7): an immutable n-ary tree of resizable, drag-and-drop panels, splits and tab groups.

Coding agents: the npm package ships an Agent Skill with the v7 API and common mistakes, at
`node_modules/react-mosaic-component/skills/react-mosaic/SKILL.md`
(or `npx skills add nomcopter/react-mosaic`).
v7 trees use `{ type: "split", direction, children, splitPercentages }` and numeric paths;
the v6 `first`/`second` shape is legacy.

The generated API reference is in [llms-api.txt](llms-api.txt).

## Table of Contents

- [Getting started](https://nomcopter.github.io/react-mosaic/docs/intro.md): **react-mosaic** is a React tiling window manager. It gives you a drag-to-resize,
- [Controlled vs uncontrolled](https://nomcopter.github.io/react-mosaic/docs/concepts/controlled-vs-uncontrolled.md): `Mosaic` supports both controlled and uncontrolled patterns, mirroring the way
- [Tabs](https://nomcopter.github.io/react-mosaic/docs/concepts/tabs.md): Tab containers are a first-class node type in react-mosaic. They are not a
- [Tree structure](https://nomcopter.github.io/react-mosaic/docs/concepts/tree-structure.md): Every layout in react-mosaic is a `MosaicNode<T>` — a tree of three kinds of
- [Updates and mutations](https://nomcopter.github.io/react-mosaic/docs/concepts/updates.md): The tree is immutable. Every mutation — drag-to-resize, dropping a panel,
- [Custom toolbars](https://nomcopter.github.io/react-mosaic/docs/guides/custom-toolbar.md): Every `MosaicWindow` renders a title bar with a default set of controls on the
- [Drag and drop integration](https://nomcopter.github.io/react-mosaic/docs/guides/drag-and-drop.md): Mosaic uses [react-dnd](https://react-dnd.github.io/react-dnd/) with a
- [Persisting layout](https://nomcopter.github.io/react-mosaic/docs/guides/persisting-layout.md): The `MosaicNode` tree is JSON-serialisable by design — no class instances,
- [Recipes](https://nomcopter.github.io/react-mosaic/docs/guides/recipes.md): Small patterns that come up a lot and don't need anything beyond the public
- [Resizing](https://nomcopter.github.io/react-mosaic/docs/guides/resizing.md): Users resize panes by dragging the dividers between them. The `resize` prop on
- [Theming](https://nomcopter.github.io/react-mosaic/docs/guides/theming.md): react-mosaic ships a neutral default theme plus a Blueprint-integrated one.
- [Customising the empty state](https://nomcopter.github.io/react-mosaic/docs/guides/zero-state.md): When the layout value is `null` — the user removed the last panel, or the
- [Migrating from v6](https://nomcopter.github.io/react-mosaic/docs/migration/from-v6.md): v7 replaced the binary tree layout with an n-ary tree. If you're coming from