Chroma Panel

Search documentation

Find a page or section

Quick start

Install the package and render your first color picker.

Installation

npm install chroma-panel

There is no CSS import and no provider to set up.

Anatomy

ColorInput renders a swatch button that opens the panel in a popover.

import { ColorInput } from "chroma-panel";
 
<ColorInput defaultValue="#3366cc" />;
#3366cc
color-input-demo.tsx
"use client";
 
import { ColorInput } from "chroma-panel";
import { useState } from "react";
 
export default function ColorInputDemo() {
  const [color, setColor] = useState("#3366cc");
 
  return (
    <div className="flex items-center gap-3">
      <ColorInput
        value={color}
        onChange={(c) => setColor(c.hex)}
        injectStyles={false}
      />
      <span className="font-mono text-sm text-muted-foreground">{color}</span>
    </div>
  );
}

Controlled

Pass value and handle onChange to keep the color in your own state. Pass defaultValue instead and the panel keeps it for you.

import { useState } from "react";
import { ColorInput, type ColorChangeResult } from "chroma-panel";
 
export function BrandPicker() {
  const [color, setColor] = useState<string>("#3366cc");
 
  const handleChange = (result: ColorChangeResult): void => {
    setColor(result.hex);
  };
 
  return <ColorInput value={color} onChange={handleChange} />;
}

onChange fires continuously while you drag. onChangeComplete fires once when you let go — use that one for saving, undo entries and network calls.

Inline panel

ChromaPanel is the same panel without the popover, for when you want it on the page.

Loading…
chroma-panel-demo.tsx
"use client";
 
import { ChromaPanel } from "chroma-panel";
 
export default function ChromaPanelDemo() {
  return <ChromaPanel defaultValue="#3366cc" injectStyles={false} />;
}

Smaller bundle

Importing chroma-panel registers all five modes. If you only need one or two, import the shell and add the modes yourself.

import { ChromaPanel } from "chroma-panel/panel";
import "chroma-panel/wheel";
 
<ChromaPanel modes={["wheel"]} />;

That is 14.1 kB instead of 22.2 kB. Every mode has its own entry point — see entry points.

Loading…
chroma-panel-wheel-demo.tsx
"use client";
 
import { ChromaPanel } from "chroma-panel";
 
export default function ChromaPanelWheelDemo() {
  return (
    <ChromaPanel
      defaultValue="#3366cc"
      modes={["wheel"]}
      showTitleBar={false}
      injectStyles={false}
    />
  );
}

Next steps