Install

Install the package for your framework. Each pulls in only its own adapter plus the shared core.

npm install @oklch-picker/react

npm install @oklch-picker/vue

npm install @oklch-picker/svelte

npm install @oklch-picker/solid

npm install @oklch-picker/angular

npm install @oklch-picker/qwik

npm install oklch-picker

npm install oklch-picker

The stylesheet

It lives in the shared core, which every adapter already depends on:

import "@oklch-picker/core/styles.css";

Your framework is an optional peer dependency. Preact works throughpreact/compat, which most Preact setups already alias.

The shared core

@oklch-picker/core holds the colour maths and the headless model, with no UI. Every adapter depends on it, and it is worth installing on its own if you want the maths without a picker: validating stored colours on a server, generating palettes, or naming colours in a table. See colour utilities.

import { colourName, clampToGamut, maxChroma } from "@oklch-picker/core";

Whichever you import, the props are the same (presets,layout, parts, labels,classPrefix), and the value semantics follow each framework's idiom.

Coming from oklch-picker 0.2 or earlier?

oklch-picker used to be the React component; it is now the no-framework custom element, so that npm i oklch-picker gives the build that works anywhere. Framework users move to a scoped package:

Nothing else changes. The components, props, and emitted values are identical. The split exists so an app downloads only the adapter it uses instead of every one of them.