Icon Color Picker

beta

Choose an artwork color with a native picker or hex field, with validation and a reset.

Preview

Icon color

Follows the original color.

Original color

Follows the original color.

1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.
```
npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"
```
2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.
```
npx shadcn@latest add @txbrendan/theme
```

3. Add the component.

npx shadcn@latest add @txbrendan/icon-color-picker

Controlled color editing for icon artwork. Use null to retain the original color.
Accepts three- or six-digit hex. Invalid input preserves the last valid value.

original
Original hex used for the default swatch and placeholder.
string
value
Chosen hex color, or null for the original.
string | null
onValueChange
Called for valid colors and resets.
(value: string | null) => void
label
Visible label and accessible name.
string · default "Icon color"
resetLabel
Reset action label.
string · default "Use default color"
disabled
Disables editing.
boolean · default false

Prop	Type	Default	What it does
original	string	-	Original hex used for the default swatch and placeholder.
value	string \| null	-	Chosen hex color, or null for the original.
onValueChange	(value: string \| null) => void	-	Called for valid colors and resets.
label	string	"Icon color"	Visible label and accessible name.
resetLabel	string	"Use default color"	Reset action label.
disabled	boolean	false	Disables editing.

Both inputs are labeled. Invalid hex has an associated message and aria-invalid.
Chosen artwork colors are not contrast-checked. Controls retain theme colors.

<IconColorPickerExample />