Troubleshooting

The handful of gotchas people hit most often, and the exported types for when you want full type safety.

The picker renders unstyled

The stylesheet is a separate import. Add it once, anywhere in your app:

import 'chromakit-react/chromakit.css';

Next.js: "window is not defined"

The picker is a client component. In the App Router add the "use client" directive; in the Pages Router load it dynamically with SSR disabled:

import dynamic from 'next/dynamic';

const ColorPicker = dynamic(
  () => import('chromakit-react').then((m) => m.ColorPicker),
  { ssr: false }
);

Recent colors are not persisting

History is stored in localStorage under the key chromakit-color-history. It will not persist in private / incognito windows, and requiresenableHistory (on by default). Clear it manually with:

import { clearColorHistory } from 'chromakit-react';
clearColorHistory();

TypeScript errors on the onChange color

onChange and onChangeComplete receive a ColorValue, which carries every format at once — read the one you need:

import type { ColorValue } from 'chromakit-react';

const handleChange = (color: ColorValue) => {
  console.log(color.hex, color.oklch);
};

Type exports

ChromaKit is written in TypeScript and ships its declarations. Every public type is importable:

import type {
  // Color format types
  RGB, RGBA,
  HSL, HSLA,
  HSV, HSVA,
  OKLAB, OKLABA,
  OKLCH, OKLCHA,

  // Core types
  ColorFormat,
  ColorValue,

  // Component & preset types
  ColorPickerProps,
  PresetGroup,
  PresetGroupsInput,
} from 'chromakit-react';