Accessible React gradient color picker

GradientEditor builds linear and radial CSS gradients. It comes from a separate entry point, so a solid-color picker does not ship the gradient code.

Usage

import { useState } from "react";
import {
  GradientEditor,
  gradientToCss,
  type GradientValue,
} from "chroma-panel/gradient";
 
const initial: GradientValue = {
  type: "linear",
  angle: 90,
  stops: [
    { id: "start", color: "oklch(65% 0.22 285)", position: 0 },
    { id: "end", color: "#06b6d4", position: 100 },
  ],
};
 
export function GradientExample() {
  const [gradient, setGradient] = useState(initial);
  return (
    <GradientEditor
      value={gradient}
      onChange={setGradient}
      onChangeComplete={(value) => console.log(gradientToCss(value))}
    />
  );
}

Props

Prop	Type	Default
`value`	`GradientValue`	—
`defaultValue`	`GradientValue`	purple-to-cyan linear gradient
`onChange`	`(value) => void`	—
`onChangeComplete`	`(value) => void`	—
`minStops`	`number`	`2`
`maxStops`	`number`	`12`
`disabled`	`boolean`	`false`

Each stop has a stable id, a CSS color, and a position from 0 to 100. The editor supports linear and radial gradients, keyboard-operable range inputs, native color controls and direct CSS color input.

Model utilities

The same entry exports gradientToCss, sampleGradient, normalizeGradient, addGradientStop and isGradientColorSupported. sampleGradient defaults to OKLab interpolation to avoid the muddy midpoints common in RGB gradients.