nili/ui
enfaartr
All components

ColorPicker

Overview
17 exports2 variant axes34 props4 files
import { ColorDot, ColorPicker, ColorSlider, ColorSpectrum } from '@nili/ui';

This is the library’s own overview page, rendered live. Switch the language or the theme in the header and it follows.

Color Dot

A swatch button. Ten palette colours, or any CSS colour through value. aria-label is required — a coloured circle has no accessible name of its own.

palette (click one)
arbitrary values
import { ColorDot } from "@nili/ui"

export function Example() {
  const [selected, setSelected] = useState("blue")

  return (
    <>
      {palette.map((color) => (
        <ColorDot
          key={color}
          color={color}
          aria-label={color}
          selected={selected === color}
          onClick={() => setSelected(color)}
        />
      ))}

      {/* an arbitrary colour */}
      <ColorDot value="#0E121B" aria-label="Ink" />
    </>
  )
}

Color Picker

Spectrum, hue track and a hex field. Uncontrolled with defaultValue, or controlled with value plus onChange — which fires with a hex string, including the alpha pair when opacity is on.

100%
Recommended Colors
#335CFF
import { ColorPicker } from "@nili/ui"

export function Example() {
  const [color, setColor] = useState("#335CFF")

  return <ColorPicker value={color} onChange={setColor} />
}

Opacity and swatches

withOpacity adds the alpha track and switches the hex field to eight digits. swatches is the row of recent or brand colours under the controls.

with opacity
80%
Recommended Colors
with swatches
100%
Recommended Colors
import { ColorPicker } from "@nili/ui"

export function Example() {
  return (
    <ColorPicker
      withOpacity
      defaultValue="#7D52F4CC"
      swatches={["#335CFF", "#1FC16B", "#FB3748", "#F6B51E", "#7D52F4"]}
    />
  )
}

Footer and labels

footer sits under the hex field — a confirm button, usually, when the picker lives in a popover. Every visible string is a prop, so the component ships no translation stack of its own.

100%
Saved colours
import { ColorPicker, Button } from "@nili/ui"

export function Example() {
  return (
    <ColorPicker
      withOpacity
      defaultValue="#FB3748"
      swatches={swatches}
      labels={{
        spectrum: "Saturation and brightness",
        hue: "Hue",
        opacity: "Opacity",
        hex: "Hex value",
        swatches: "Saved colours",
        eyedropper: "Pick a colour from the screen",
      }}
      footer={<Button size="xs" fullWidth>Apply</Button>}
    />
  )
}