Installation

Prerequisites

• One of Vue 3 (v3.4+), React (v18+), Preact (v10.19+), Svelte (v5.29+), or Angular (v21.2+)
• Node.js (v18+) or Bun

Packages

Package	Description
urcolor	The color engine on its own, under an unscoped name. Re-exports @urcolor/core
@urcolor/core	Core color logic and accessibility utilities
@urcolor/shared	Framework-agnostic picker behavior, WebGL rendering, and grid samplers shared by every binding
@urcolor/vue	Vue 3 components and composables
@urcolor/react	React components and hooks
@urcolor/preact	The React components and hooks, compiled against preact/compat
@urcolor/svelte	Svelte 5 components and rune hooks
@urcolor/angular	Angular directives and signal stores
@urcolor/relative	Opt-in CSS Color 5 relative color syntax
@urcolor/i18n	Multilingual color names and channel labels

Install

Vue

bun

bun add @urcolor/vue

npm

npm install @urcolor/vue

pnpm

pnpm add @urcolor/vue

yarn

yarn add @urcolor/vue

React

bun

bun add @urcolor/react

npm

npm install @urcolor/react

pnpm

pnpm add @urcolor/react

yarn

yarn add @urcolor/react

Preact

bun

bun add @urcolor/preact

npm

npm install @urcolor/preact

pnpm

pnpm add @urcolor/preact

yarn

yarn add @urcolor/preact

Svelte

bun

bun add @urcolor/svelte

npm

npm install @urcolor/svelte

pnpm

pnpm add @urcolor/svelte

yarn

yarn add @urcolor/svelte

Angular

bun

bun add @urcolor/angular

npm

npm install @urcolor/angular

pnpm

pnpm add @urcolor/angular

yarn

yarn add @urcolor/angular

Every framework package depends on @urcolor/core and @urcolor/shared, so both come along with whichever binding you install. Nothing else does: the Vue package builds on Reka UI primitives, but bundles the parts it uses and ships no dependency on it, and the other bindings carry no third-party runtime dependency at all.

Core only

For the color utilities without a framework binding, install urcolor, the unscoped name for the same engine:

bun

bun add urcolor

npm

npm install urcolor

pnpm

pnpm add urcolor

yarn

yarn add urcolor

import { Color } from "urcolor";

urcolor holds no code of its own. It re-exports @urcolor/core and depends on it by the same range the framework packages use, so you get one copy of the engine and one Color class either way. Install whichever name you prefer. @urcolor/core is already present if you installed a framework binding, and mixing the two names in one project is safe.

Optional packages

@urcolor/relative adds CSS Color 5 relative color syntax, and @urcolor/i18n adds multilingual color naming:

bun

bun add @urcolor/relative @urcolor/i18n

npm

npm install @urcolor/relative @urcolor/i18n

pnpm

pnpm add @urcolor/relative @urcolor/i18n

yarn

yarn add @urcolor/relative @urcolor/i18n