Color Picker
Saturation/value pad, hue strip, hex input, swatches and the native EyeDropper — inline or in a popover.
5 files · 409 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/color-picker.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs color-pickerUsage
import { ColorPicker, ColorPickerPopover } from "@/components/opus/ui/color-picker";
<ColorPickerPopover value={hex} onValueChange={setHex} />API
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue / onValueChange | string | — | Hex colour. |
| swatches | string[] | — | Preset colours. |
Notes
- The pad and hue strip are sliders: arrow keys adjust (Shift for bigger steps).