# React Mosaic Layouts

Builds resizable, dockable tiled panel layouts with react-mosaic-component.

- Repository: https://github.com/nomcopter/react-mosaic (4803 stars)
- Category: Engineering
- License: see repository
- Last updated: 2026-09-28
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add nomcopter/react-mosaic --skill react-mosaic -g -a claude-code -y`
Codex: `npx skills add nomcopter/react-mosaic --skill react-mosaic -g -a codex -y`
Cursor: `npx skills add nomcopter/react-mosaic --skill react-mosaic -g -a cursor -y`
Gemini CLI: `npx skills add nomcopter/react-mosaic --skill react-mosaic -g -a gemini-cli -y`

## Description

Build tiling window manager layouts in React with react-mosaic-component (v7) - resizable, drag-and-drop rearrangeable panels, splits and tab groups. Use when writing or changing code that imports react-mosaic-component, uses Mosaic / MosaicWindow / MosaicNode, or when asked for an IDE-like, dockable, resizable or tiled panel layout in React.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# react-mosaic-component (v7)

A React tiling window manager (React 16-19, TypeScript). The layout is an
**immutable n-ary tree** of panels. Full docs: https://nomcopter.github.io/react-mosaic/

**v7 is not v6.** Most examples online (and in older training data) use the v6
binary tree (`first` / `second`, `splitPercentage`, string paths like
`['first']`). That shape is legacy. Write v7 code as shown here.

## Setup

```bash
npm install react-mosaic-component
```

```tsx
import 'react-mosaic-component/react-mosaic-component.css'; // required
```

`<Mosaic>` fills its parent, so the parent **must have a real height**
(e.g. `height: 100vh`), otherwise nothing is visible.

## Minimal example

```tsx
import { Mosaic, MosaicWindow, type MosaicNode } from 'react-mosaic-component';
import 'react-mosaic-component/react-mosaic-component.css';

const initial: MosaicNode<string> = {
  type: 'split',
  direction: 'row', // 'row' = side by side, 'column' = stacked
  splitPercentages: [30, 70], // optional, sums to 100
  children: [
    'files',
    { type: 'split', direction: 'column', children: ['editor', 'terminal'] },
  ],
};

export function App() {
  return (
    <div style={{ height: '100vh' }}>
      <Mosaic<string>
        initialValue={initial}
        renderTile={(id, path) => (
          <MosaicWindow<string> path={path} title={id}>
            <Panel id={id} />
          </MosaicWindow>
        )}
      />
    </div>
  );
}
```

`renderTile(key, path)` is called for every leaf. Pass the `path` it gives you
straight to `MosaicWindow`; never compute paths yourself.

## The tree

```ts
type MosaicKey = string | number; // a leaf is just its key
type MosaicNode<T> = MosaicSplitNode<T> | MosaicTabsNode<T> | T;

interface MosaicSplitNode<T> {
  type: 'split';
  direction: 'row' | 'column';
  children: MosaicNode<T>[]; // any number of children
  splitPercentages?: number[]; // one per child, sums to 100; omit for equal sizes
}

The rest: https://github.com/nomcopter/react-mosaic/blob/HEAD/skills/react-mosaic/SKILL.md