Components

urcolor ships eight families of unstyled, accessible color picker primitives for Vue, React, Svelte and Angular. Each family is a set of parts you compose, and each works in any supported color space.

See them working together in the full preview.

The families

Family	What it does	Vue	React	Svelte	Angular
Color Area	Two channels on a plane, one drag sets both	docs	docs	docs	docs
Color Slider	One channel on a track, horizontal or vertical	docs	docs	docs	docs
Color Field	A numeric input per channel, with steppers	docs	docs	docs	docs
Color Swatch	One color as a filled element	docs	docs	docs	docs
Swatch Picker / Group	A keyboard-navigable palette	docs	docs	docs	docs
Color Ring	One channel on a circle	docs	docs	docs	docs
Color Triangle	Two channels on a triangle, or three in barycentric mode	docs	docs	docs	docs
Color Wheel	One channel on the angle, another on the radius	docs	docs	docs	docs

Alpha

Every family can show opacity. Sliders and fields take channel="alpha"; the area, slider and swatch take an alpha prop. The Gradient parts paint the transparency checkerboard behind their own canvas, so nothing else is needed to make it visible.

For step-by-step recipes, see How to, which shows all four frameworks side by side.