# Color Picker

Colour picker with a shade board, hue and opacity sliders, hex entry and preset swatches. The cursor shows the picked colour live, and a compact mode tucks it all behind a swatch row.

> Composed · Pro · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/color-picker
```

## Import

```tsx
import { hsvToRgb, hsvToHex, hexToHsv, hsvaToRgba, hsvLuma, ColorPicker } from "@/components/ui/color-picker/color-picker";
```

## Variants

- `compact` — Compact: `npx @lumioui/cli add pro/color-picker-compact`
- `inline` — Inline: `npx @lumioui/cli add pro/color-picker-inline`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `value?` | `string` | Controlled hex — `#rrggbb` or `#rrggbbaa` when `showAlpha`. |
| `defaultValue?` | `string` | Uncontrolled seed (default `#3B82F6`). |
| `onChange?` | `(hex: string) => void` | Emits `#rrggbb` / `#rrggbbaa` — throttled while dragging, and once  more with the settled colour on release. |
| `onChangeComplete?` | `(hex: string) => void` | Fires once per finished interaction (release, tap, hex commit) with  the settled colour — the place to persist. |
| `presets?` | `string[]` | Preset swatches — tapping snaps + ticks; releasing a drag within ~5%  of one snaps to it too. |
| `showAlpha?` | `boolean` | Show the alpha channel slider + emit 8-digit hex (default true). |
| `variant?` | `"inline" | "compact"` | `inline` renders the full board; `compact` collapses it into a popover  behind a swatch row (default `inline`). |
| `liveColor?` | `SharedValue<HsvColor>` | Written on the UI thread with the HSVA under the finger on every frame  of a drag (and on every settled change) — drive a live preview from it  with `hsvaToRgba` / `hsvLuma` in an animated style, with no lag. |
| `disabled?` | `boolean` | — |
| `className?` | `string` | — |

Source: https://lumioui.com/components/color-picker