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:

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, ChannelSlider, Swatch and the rest. They read the colour through usePanel(), so they only work inside a ChromaPanel.

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.

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%)` }} />;
}

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.

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

const store = createColorStore({ h: 220, s: 75, v: 80, a: 1 });
 
<ChromaPanel store={store} />
<ColorInput store={store} />

See useColorStore.

Composition

Inside the panel: a custom mode

Outside the panel: the store and hooks

Sharing one colour between panels