Forms

Color Picker

Choose a colour — a saturation plane, hue and transparency sliders, an eye dropper, saved swatches and a parsed value box. Compound, so a screen takes only the parts it needs.

Import

import { ColorPicker, useColorPicker, parseColor } from "@countryclub/ui-react";

Default

With Transparency

Pass withAlpha to add the alpha slider and let the value carry opacity.

Minimal

No saturation plane — the two sliders, an eye dropper and a value box, for a panel that has to sit beside the thing it colours.

Swatches

A fixed palette. Without onAdd there is no plus tile.

Saved Colours

A palette somebody builds as they go — pick, press +, it joins the row.

Hue Slider

The hue slider on its own, next to a preview swatch.

Transparency Slider

The alpha slider on its own. The chequerboard sits under the gradient, so what shows through is what transparent looks like.