Anatomy
import { SwatchGrid } from "chroma-panel";Only inside a panel
This is one of the parts the built-in modes are made of. It reads the colour
through usePanel(), so it only works inside a ChromaPanel — typically in a
custom mode. For a picker outside the panel, use the
store and hooks.
API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| swatches* | SwatchEntry[] | — | The colours, each optionally with a name. |
| columns | number | 10 | Swatches per row. The pencil grid uses 30. |
| variant | SwatchVariant | 'spaced' | 'spaced' leaves gaps between swatches; the tighter variants butt them together, as the pencil grid does. |
| round | boolean | false | Render every swatch as a circle. |
| label* | string | — | Accessible name for the grid, such as the palette's name. |
| className | string | — | Class on the grid. |