Chroma Panel

Search documentation

Find a page or section

Swatch sets. Pass your brand colours to replace the built-in ones.

Anatomy

import { ChromaPanel } from "chroma-panel/panel";
import "chroma-panel/palettes";
 
<ChromaPanel
  modes={["palettes"]}
  palettes={[{ name: "Brand", colors: ["#3366cc", "#cc3366"] }]}
/>;

Leave palettes out to get the built-in set. Read it with defaultPalettes if you want to extend rather than replace it.

Mode id

'palettes'. List it in modes to show the tab, and in the order you want the tabs.