Color Picker
NewPro
A full color panel with a saturation area, hue and opacity sliders, a hex field and preset swatches, all usable from the keyboard.
Customize
#ff784f
Opacity
Preset swatches
Hex field
When to use it
- Brand or accent color settings in a theme editor
- Team, clan or profile colors in a game
- Label and tag colors in a dashboard
Good to know
- Plan
- Pro
- Dependencies
- None beyond React
- Rendering
- DOM and CSS
- Lines of code
- 476
Installation
Color Picker is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy color-picker.tsx into components/ui.
Usage
import { ColorPicker } from "@/components/ui/color-picker";
<ColorPicker
label="Accent color"
name="accent"
value={accent}
onChange={setAccent}
/>Props
12 properties| Property | Type | Default | Description |
|---|---|---|---|
| value | string | — | Controlled color as #rrggbb, or #rrggbbaa with transparency. Leave it out to let the picker manage itself. |
| defaultValue | string | "#ff784f" | Starting color when uncontrolled. |
| onChange | (hex: string) => void | — | Called on every change, also while dragging. |
| onChangeEnd | (hex: string) => void | — | Called when a drag, key press, swatch click or typed edit ends. |
| alpha | boolean | true | Shows the opacity slider and field. |
| swatches | string[] | DEFAULT_SWATCHES | Preset colors. An empty list hides them. |
| showInput | boolean | true | Shows the hex field. |
| label | string | — | Visible label above the panel. |
| disabled | boolean | false | Blocks interaction and leaves the field out of form data. |
| name | string | — | Form field name. Submits the hex value. |
| id | string | — | Base id for the label. |
| className | string | — | Extra classes for the wrapper. |