Color Picker

Pill swatch trigger with hex or clear trailing, and channel editors in a popover.

Installation

Add this item from the registry, or import it from the package after installing Default File UI.

Registry path

itsvigneshv/default-file-ui/color-picker

Package import

import { ColorPicker } from "@default-file/ui/components/df-color-picker"

Pill trigger shows the hex value. The whole pill opens the picker.

Replace the hex with an X. The pill still opens the picker; X fires onClear.

Pill swatch trigger with optional hex or clear trailing, and channel editors in a popover.

Prop	Type	Default	Notes
value	string	—	Current color as a hex string (required).
onChange	(hex: string) => void	—	Called when the color changes (required).
label	string	"Pick color"	Accessible name for the swatch trigger.
trailing	"hex" \| "clear"	—	Optional trailing control: show hex text, or a clear action.
onClear	() => void	—	Required when trailing is "clear".
clearLabel	string	"Remove color"	Accessible label for the clear control.
className	string	—	Additional styles on the root.

Prop	Type	Default	Notes
Popover editors	internal UI	—	Opened panel supports hex, rgb, hsl, and hsb channel modes (not separate props).