# Composition


There are two ways to build on this package, and which one you want depends on
whether your UI lives inside the panel.

## Inside the panel: a custom mode

A mode is plain data, so adding one changes no existing file:

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

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

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

Inside `BrandPanel` you can use the panel's own controls —
[ColorArea](/react/components/color-area),
[ChannelSlider](/react/components/channel-slider),
[Swatch](/react/components/swatch) and the rest. They read the colour through
`usePanel()`, so they only work inside a `ChromaPanel`.

More in [custom modes](/react/modes/custom).

## Outside the panel: the store and hooks

For a picker that is not inside a `ChromaPanel`, make a store and read it with
the hooks.

```tsx
import { createColorStore } from "chroma-panel/core";
import { useColorValue } from "chroma-panel";

const store = createColorStore({ h: 220, s: 75, v: 80, a: 1 });

function Preview() {
  const color = useColorValue(store);

  return <div style={{ background: `hsl(${color.h} 50% 50%)` }} />;
}
```

<Callout variant="warning" title="The primitives are not standalone">
  `ColorArea`, `ChannelSlider` and the others read `usePanel()`. Rendering one
  outside a `ChromaPanel` will not work. Use `createColorStore` and the hooks
  instead.
</Callout>

## Sharing one colour between panels

Pass the same store to more than one component and they stay in step.

```tsx
const store = createColorStore({ h: 220, s: 75, v: 80, a: 1 });

<ChromaPanel store={store} />
<ColorInput store={store} />
```

See [useColorStore](/react/utils/use-color-store).