Iconiq is an open-source library of motion-powered React components built around the shadcn registry workflow.

How do I install an Iconiq component?

Install components with shadcn using commands like npx shadcn@latest add @iconiq/b-button, or use a direct registry URL from https://iconiqui.com/r/b-button.json.

Is Iconiq free to use?

Yes. Iconiq is open source and free to use for personal and commercial projects.

What technologies power Iconiq?

Iconiq components are written in TypeScript and React, with motion powered by Motion and registry delivery built around shadcn/ui conventions.

Color Picker

HSV picker with sliders, format readouts, hex input, and eyedropper.

Installation

npx shadcn@latest add @iconiq/color-picker

Props

ColorPicker

9 props

Self-contained HSV panel with saturation field, hue/alpha sliders, multi-format readouts, and EyeDropper.

valuestring

Controlled hex color such as #3B82F6. When provided, the picker syncs its internal state to this value.

defaultValuestring

Default#3B82F6

Starting color for uncontrolled usage. Ignored when value is supplied.

onChange(color: string) => void

Called when the color settles (pointer up on sliders, blur/Enter on inputs). Emits #RRGGBB, or #RRGGBBAA when alpha is below 100%.

defaultAlphanumber

Default100

Starting alpha percentage (0–100) for uncontrolled usage when defaultValue has no alpha channel.

disabledboolean

Defaultfalse

Disables picker interaction and lowers shell opacity.

reducedMotionboolean

Forces reduced motion for format-menu animation and decorative pulses.

showEyedropperboolean

Defaulttrue

Shows or hides the pipette control in the footer row.

onEyedropperUnsupported() => void

Called when EyeDropper is unavailable. No alert dialog is shown by default.

classNamestring

Merged onto the outer picker shell for width, shadow, or layout overrides.

Notes

Install with npx shadcn@latest add https://iconiqui.com/r/color-picker.json (requires lucide-react, motion, and a cn helper).

Theme tokens are embedded on the root node so the picker works without iconiq-theme, though it still maps cleanly to shadcn semantic colors.

The saturation square, hue slider, and alpha slider share one RGB source of truth. Slider drags emit on pointer up to stay stable in controlled mode.

Format switching exposes editable HEX, RGB, HSL, and OKLCH channels. Values commit on blur or Enter so partial typing does not fight the live color state.

EyeDropper support depends on the browser API (Chrome/Edge). Use onEyedropperUnsupported for user-facing feedback.

FluidColorPicker remains exported as a backward-compatible alias for older imports.