OOratiq

Color Picker

Ready

Pick a colour with swatches and input.

Installation

$ npx @oratiq-js/ui add color-picker

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

import
import { ColorPicker } from "@/components/ui/color-picker";

Behaviour

  • Swatch grid for the common case; a hex field for precision; the native picker (with eyedropper where the OS has one) for everything else.
  • Hex values are pinned dir="ltr" — a colour code is a code, not prose.
  • 3-digit hex shorthand is expanded (#f0a → #ff00aa); invalid input reverts on blur.

Props

PropTypeDefaultDescription
value / defaultValuestring"#cbfe00"Hex colour (controlled / uncontrolled).
swatchesstring[]—Preset palette. Pass your brand ramp.
onValueChange(hex: string) => void—Fires with a normalised 6-digit hex.

View source on GitHub → components/ui/color-picker.tsx