Theming

react-mosaic ships a neutral default theme plus a Blueprint-integrated one. Both are opt-in: the library renders nothing visible until you pull in a stylesheet, and which stylesheet you pull in decides the look.

The required stylesheet

You must import the library CSS somewhere in your app:

import 'react-mosaic-component/react-mosaic-component.css';

This bundles the layout rules (split bars, drop targets, drag preview) and the default theme in one file. Without it, panels render but have no dividers, no hover states, and no drop indicators.

Applying a theme: className on <Mosaic>

The className prop on Mosaic is how you pick a theme. The library recognises two built-in values:

• 'mosaic-blueprint-theme' — matches Blueprint's default (light) palette.
• 'mosaic-blueprint-theme bp5-dark' — Blueprint dark mode. (Combine with blueprintNamespace="bp5" so internal icons render via Blueprint's icon font.)

<Mosaic<string>
  className="mosaic-blueprint-theme bp5-dark"
  blueprintNamespace="bp5"
  renderTile={/* ... */}
  initialValue={/* ... */}
/>

If you're not using Blueprint at all, leave className empty — the default neutral theme is always on.

Writing your own theme

Every visual rule in the library is namespaced under .mosaic-*. To theme your own panels, add a class to Mosaic and scope overrides to it:

.my-theme.mosaic {
  background: #0b1220;
}

.my-theme .mosaic-window {
  background: #111a2c;
  border: 1px solid #1f2a44;
  border-radius: 6px;
}

.my-theme .mosaic-window-title {
  background: linear-gradient(90deg, #1a2236, #111a2c);
  color: #cbd5e0;
}

.my-theme .mosaic-split:hover {
  background: #4c90f0;
}

<Mosaic className="my-theme" renderTile={/* ... */} />

You don't need to restyle everything — the default theme is the base, and your class overrides only what you specify.

The class names that matter

When writing a theme, these are the selectors you'll most often target:

Selector	What it is
.mosaic	Root container
.mosaic-window	Individual panel
.mosaic-window-title	Title bar area
.mosaic-window-body	Panel content area
.mosaic-window-toolbar	Whole title bar (title + controls)
.mosaic-window-controls	Right-hand button cluster
.mosaic-split	Draggable divider between siblings
.mosaic-split.-row / .-column	Direction-specific divider
.mosaic-split-line	The visible line inside a divider
.mosaic-drop-target	Hover target shown during drag
.mosaic-tab-bar	Tab strip of a tab group
.mosaic-tab-button	Single tab header
.mosaic-tab-button.-active	The currently-selected tab header
.mosaic-zero-state	Empty-state placeholder

Class names are mosaic-<element>, and states are separate -modifier classes (-row, -active, -dragging). If you can't find a class, inspect a running demo in DevTools; the names are stable.

Styling the split bar

A row split has a vertical divider and a column split has a horizontal one. Style the divider itself for hover effects. Note there is no space before :hover:

.my-theme .mosaic-split.-row:hover {
  background: #4c90f0;
}

With the Blueprint theme, the theme already sets the hover background, so match its specificity to override it, or style the inner line instead:

.mosaic.mosaic-blueprint-theme .mosaic-split.-row:hover {
  background: #4c90f0;
}

/* or keep the background and recolor the line */
.mosaic.mosaic-blueprint-theme .mosaic-split:hover .mosaic-split-line {
  box-shadow: 0 0 0 2px #4c90f0;
}

Live example

Flip between themes in the demo app — the theme selector in the toolbar toggles className on a live <Mosaic> instance. That's the whole integration: one string.