Anatomy
import { ChromaPanel } from "chroma-panel";
<ChromaPanel defaultValue="#3366cc" modes={["wheel"]} showTitleBar={false} />;Demo
Loading…
"use client";
import { ChromaPanel } from "chroma-panel";
export default function ChromaPanelDemo() {
return <ChromaPanel defaultValue="#3366cc" injectStyles={false} />;
}API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | Hsva | — | The colour, when you keep it in your own state. |
| defaultValue | string | Hsva | '#3366cc' | The starting colour, when you want the panel to keep it. |
| onChange | (color: ColorChangeResult) => void | — | Fires continuously while a drag is in progress. |
| onChangeComplete | (color: ColorChangeResult) => void | — | Fires once when the drag ends. Use it for saving, undo entries and network calls. |
| modes | (ModeId | string | PickerMode)[] | all five | Which tabs appear, in the order you list them. |
| mode | string | — | The open tab, when you control it. |
| defaultMode | string | first mode | The tab to open on. |
| onModeChange | (mode: string) => void | — | Fires when the reader switches tabs. |
| format | ColorFormat | 'hex' | Sets the css string on the change result, and the value a form submits. |
| showAlpha | boolean | true | Turn off when opacity is not allowed. |
| showEyedropper | boolean | true | Turn off to hide the eyedropper even where it is supported. |
| showRecentColors | boolean | true | Turn off in a one-shot picker. |
| recentColors | string[] | — | The recent-colour history, when you keep it. Persist it yourself to carry the list between sessions. |
| defaultRecentColors | string[] | [] | The starting history, when you want the panel to keep it. |
| onRecentColorsChange | (colors: string[]) => void | — | Fires with the whole list whenever a colour is added to it. |
| palettes | ColorPalette[] | built-in set | Replaces the palette swatches with your own. |
| pencils | string[] | built-in 120-colour grid | Replaces the pencil grid. |
| modeProps | Record<string, Record<string, unknown>> | — | Props spread onto one mode's panel, keyed by mode id. Lets a custom mode take props without the panel knowing about it. |
| imageOptions | ExtractOptions | — | Shorthand for modeProps.image.extractOptions. |
| disabled | boolean | false | Makes the panel read-only. |
| theme | "dark" | "light" | system | Forces one theme instead of following the OS. |
| showTitleBar | boolean | true | Turn off for an inline panel with no chrome. |
| title | string | 'Colours' | The title bar text. |
| onClose | () => void | — | Fires when the red window control is used. An inline panel has nothing to close, so that control is dimmed until you pass this. |
| collapsed | boolean | — | Whether the panel is collapsed to its title bar, when you control it. |
| defaultCollapsed | boolean | false | Whether it starts collapsed. Collapsing hides the body with CSS rather than unmounting, so nothing is lost. |
| onCollapsedChange | (collapsed: boolean) => void | — | Fires when the yellow window control is used. |
| size | PanelSize | — | The panel size, when you control it. |
| defaultSize | PanelSize | 'default' | The starting size. 'expanded' widens the panel, and the wheel with it. |
| onSizeChange | (size: PanelSize) => void | — | Fires when the green window control is used. |
| injectStyles | boolean | true | Turn off when you import chroma-panel/style.css yourself, as this site does. |
| className | string | — | Class applied to the panel root. |
| classNames | ChromaClassNames | — | Classes applied per part. |
| style | React.CSSProperties | — | Inline styles on the panel root. Setting the --cp-* custom properties here themes a single panel. |
| store | ColorStore | — | An external colour store, for driving several panels from one colour. |