cromia — headless color picker primitives for React. Area selectors, channel sliders, hex inputs, and preset swatches. Compose any picker from the same building blocks.

npm install cromia

Examples

Complete

Area, sliders, input, and swatches.

Channels

Individual H·S·B·A editable sliders.

Hue

Saturation

Brightness

Alpha

Compact

Just the essentials — area and hue.

Swatches

Preset palette with hue fine-tuning.

Usage

Install

Add cromia to your project. Works with any React 18+ or 19+ setup.

npm install cromia

Basic picker

Compose a minimal picker with an area selector, hue slider, and hex input.

color-picker.tsx

import { ColorPicker } from 'cromia';
import { useState } from 'react';

function Picker() {
  const [color, setColor] = useState('#3B82F6');

  return (
    <ColorPicker.Root color={color} onColorChange={setColor}>
      <ColorPicker.Area className="relative h-48 w-full">
        <ColorPicker.AreaBackground />
        <ColorPicker.AreaThumb />
      </ColorPicker.Area>

      <ColorPicker.ChannelSlider channel="hue">
        <ColorPicker.ChannelSliderTrack />
        <ColorPicker.ChannelSliderThumb />
      </ColorPicker.ChannelSlider>

      <ColorPicker.Input channel="hex" />
    </ColorPicker.Root>
  );
}

Color swatches

Add preset color swatches so users can quickly pick from a curated palette.

color-picker.tsx

const swatches = ['#E44444', '#3B82F6', '#22C55E'];

<ColorPicker.Root color={color} onColorChange={setColor}>
  <ColorPicker.SwatchGroup>
    {swatches.map((c) => (
      <ColorPicker.Swatch
        key={c}
        value={c}
        selected={color === c}
        onSelect={setColor}
      />
    ))}
  </ColorPicker.SwatchGroup>
</ColorPicker.Root>

Channel sliders

Expose individual hue, saturation, brightness, and alpha channels as editable sliders.

color-picker.tsx

const channels = ['hue', 'saturation', 'brightness', 'alpha'];

<ColorPicker.Root color={color} onColorChange={setColor}>
  {channels.map((ch) => (
    <div key={ch}>
      <ColorPicker.Input channel={ch} />
      <ColorPicker.ChannelSlider channel={ch}>
        <ColorPicker.ChannelSliderTrack />
        <ColorPicker.ChannelSliderThumb />
      </ColorPicker.ChannelSlider>
    </div>
  ))}
</ColorPicker.Root>