# Custom modes


## Registering

```tsx
import { registerMode, ChromaPanel } from "chroma-panel";

registerMode({
  id: "brand",
  label: "Brand colors",
  icon: BrandIcon,
  Panel: BrandPanel, // reads the color with usePanel()
});

<ChromaPanel modes={["wheel", "brand"]} />;
```

Inside `BrandPanel`, reach the colour with
[`usePanel()`](/react/utils/use-color-store), and use the panel's own controls —
[ColorArea](/react/components/color-area),
[Swatch](/react/components/swatch) and the rest.

## Passing props into a mode

`modeProps` is keyed by mode id, and each entry is spread onto that mode's panel
component. It exists so a custom mode can take props without the panel needing
to know about it:

```tsx
<ChromaPanel modeProps={{ brand: { team: "design" } }} />
```

## API reference

<SignatureList names="registerMode, getMode, resolveModes" />