Primitives

Color picker

Square, hue strip, swatches, hex and the eyedropper; inline or in a popover. Drag or arrow keys.

A Wavi Pro component

The live example is open to everyone. The source comes with a Wavi Pro licence: add it with one command, or copy it below.

Zone colour

Level 1 · Bay A

#0d9488

Import#

The package for everything else, and the Pro component from where `add` puts it:

your-component.tsx

import { FormField } from "@waveinno/ui";
import { ColorPicker, ColorPickerPopover } from "@/components/wavi-pro/color-picker";

Read from the source of this version, so they match the code exactly.

pro/color-picker.tsx

Prop	Type	Default	Description
`value`	`string`	—
`defaultValue`	`string`	`"#4f46e5"`
`onValueChange`	`(hex: string) => void`	—
`swatches`	`string[] \| false`	`DEFAULT_SWATCHES`	Quick choices under the strip; `false` for none.
`className`	`string`	—

pro/color-picker.tsx

Prop	Type	Default	Description
`value`	`string`	—
`defaultValue`	`string`	`"#4f46e5"`
`onValueChange`	`(hex: string) => void`	—
`swatches`	`string[] \| false`	—	Quick choices under the strip; `false` for none.
`className`	`string`	—
`aria-label`	`string`	`"Colour"`

src/components/ui/form-field.tsx

Prop	Type	Default	Description
`label`	`React.ReactNode`	—
`htmlFor`	`string`	—	The control's id, so clicking the label focuses it.
`required`	`boolean`	—
`hint`	`React.ReactNode`	—
`error`	`React.ReactNode`	—
`warning`	`React.ReactNode`	—
`success`	`React.ReactNode`	—
`count`	`{ value: number; max: number }`	—	Character counter, e.g. { value: note.length, max: 240 }.
`className`	`string`	—
`children`required	`React.ReactNode`	—

With your licence key, this writes the component to components/wavi-pro/ and installs anything it needs:

$ npx @waveinno/ui add color-picker --key <your licence key>

Or copy the file yourself. It imports only from @waveinno/ui, lucide-react and React (and Radix where noted).

The source comes with Wavi Pro

One payment for every Pro component, block and template, with every update.

If the project does not have the package yet, add it, then follow the setup for Next.js or Vite once.

$ npm install @waveinno/ui