Color PickerNew

A hex field with a swatch that opens saturation, brightness and hue, presets and a pick from the screen.

$ pnpm dlx shadcn@latest add @dashral/color-picker

Brand color

Used for buttons and links.

Value: #2563eb

Installation

$ pnpm dlx shadcn@latest add @dashral/color-picker

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Or by its full URL: https://dashral.com/r/color-picker.json

Usage

example.tsx

1import { useState } from "react"
2import { ColorPicker } from "@/components/dashral/color-picker"
3
4const [color, setColor] = useState("#2563eb")
5
6<ColorPicker label="Brand color" value={color} onValueChange={setColor} swatches={["#0f172a", "#2563eb", "#16a34a", "#dc2626"]} />

Using the npm package? Import from @dashral/ui/components/color-picker instead, here and in the examples; the rest is the same.

Examples

Swatches

Presets under the picker, the one in use ticked.

Label color

Design review

Theme preview

Two colors and a live preview, as in a theme editor.

Accent

Surface

Invoice INV-1048

Due in 14 days · $1,240.00

API reference

ColorPicker

Also takes every prop of Input(opens in a new tab).

Prop	Type	Default
`label`	`ReactNode` Shown above, linked to the control.	—
`description`	`ReactNode` A hint under the control.	—
`error`	`boolean \| ReactNode` true shows the error style; a message also shows under the control.	—
`labelAction`	`ReactNode` At the end of the label's row, e.g. a “Forgot password?” link or the current value.	—
`withAsterisk`	`boolean` Marks the label with an asterisk, e.g. alongside required.	`false`
`value / defaultValue`	`string` The color as hex, controlled or initial.	`"#2563eb"`
`onValueChange`	`(value: string ("#rrggbb")) => void` Called with the new value.	—
`swatches`	`string[]` Presets under the picker.	—
`eyeDropper`	`boolean` A button that picks a color from the screen, where the browser has the EyeDropper API (Chrome, Edge).	`true`
`name`	`string` The form field's name; the color is sent as typed or picked.	—
`disabled / required`	`boolean` As on Input.	—
`classNames`	`{ root, label, wrapper, input, description, error, content }` Classes for each part; content is the picker's panel.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

Keyboard

Keys	Action
`Enter`or`Space`	Open the picker (on the swatch)
`←`or`→`	Saturation (in the square), or hue (on the slider)
`↑`or`↓`	Brightness (in the square), or hue
`Shift + arrows`or`Page Up`or`Page Down`	Steps of 10
`Home`or`End`	Hue at its ends
`Escape`	Close the picker

Accessibility

With label, description or error, the id, aria-describedby and aria-invalid are wired up for you.
The square and the hue bar are sliders: "Saturation and brightness" says both values, "Hue" its degrees.
Each swatch is a button named by its hex value, pressed when it's the color in use.
Its words come from the kit's messages, so a LocaleProvider translates them.