Color Picker
InputMITInline color picker with HEX / RGB / HSL formats, optional alpha + swatches, and native eye-dropper.
bun add @otfdashkit/ui
Preview
Color PickerInput
Loading Storybook preview…
Code
@otfdashkit/uiimport { useState } from 'react'
import { ColorPicker } from '@otfdashkit/ui'
export function Example() {
const [value, setValue] = useState('#3b82f6')
return (
<div className="flex flex-col gap-3">
<ColorPicker value={value} onValueChange={setValue} />
<p className="font-mono text-xs text-muted-foreground">value: {value}</p>
</div>
)
}
Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.
Props
Props declared in the ColorPicker source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | string | (readonly string[] & string) | Uncontrolled initial value. | |
| disabled | boolean | false | Disable interaction. |
| format | 'hex' | 'rgb' | 'hsl' | 'hex' | Format for the text input + picker. Default 'hex'. |
| onValueChange | (value: string) => void | Fires whenever the color changes. | |
| showAlpha | boolean | false | Include alpha channel (only meaningful for hex). Default false. |
| showEyeDropper | boolean | true | Show the eye-dropper button when the API is available. Default true. |
| swatches | string[] | Optional preset palette displayed as clickable swatches. | |
| value | string | Controlled color value (e.g. '#3b82f6' for hex, 'rgb(59, 130, 246)' for rgb). |