ColorPicker is Ant Design's ColorPicker, installed into your project as a file you own. It takes the same props, and draws the step buttons in the panel's number fields from your icon pack. Nothing in the API tables is marked antuikit.
Every callback passes a color object, not a string. Read it with .toHexString(), .toRgbString(), .toHsbString() or .toCssString().
Install
npx antuikit@latest init
npx antuikit@latest add color-picker
The first command installs AntuikitProvider and the theme tokens. The second adds this component.
Import
Import from @/components/ui/color-picker, not from antd. The file lives in your project once installed.
import { ColorPicker } from "@/components/ui/color-picker"
The axes
Four props take named values. ColorPicker has no variant.
mode: single (the default), gradient, or an array of both, which adds a switch to the panel. In gradient mode the value holds color stops.
format: hex (the default), rgb or hsb, for the panel's fields and the trigger's text. defaultFormat sets the start and leaves the rest to the reader.
size: small, medium (the default) or large. A ConfigProvider or Space.Compact around it can set it too.
trigger: click (the default) or hover. placement takes any of the twelve popup placements, bottomLeft by default.
Flags
Four booleans, all off by default.
allowClear adds a clear button. Clearing makes the color fully transparent and marks it cleared, which tells it apart from a color the reader made transparent.
disabled also follows a disabled Form around the picker.
disabledAlpha removes the transparency slider and field.
disabledFormat removes the format select, locking the notation to format.
Slots
Four props take your markup. Reach for them before a descendant selector.
children replaces the trigger, and showText, size and any aria-* on the picker go with it. It is also how you get a focusable trigger.
showText takes a boolean or (color) => ReactNode, to show the value in your own words. It is the only thing that puts the value on the page as text.
panelRender receives the panel and an extra object with components.Picker and components.Presets, to reorder or drop either half.
Each entry in presets takes a label node, shown as the heading of a collapsible group.
Style the panel through classNames. The panel renders in a popup outside the component, so [&_.ant-color-picker-*] selectors on className do not reach it.
Events
onChange
onChangeComplete
onFormatChange
onOpenChange
onClear
Styling
classNames and styles take the same keys, and popup.root reaches the panel.
1
<ColorPicker
2
classNames={{
3
root: "…",
4
body: "…",
5
content: "…",
6
description: "…",
7
popup: {
8
root: "…",
9
},
10
}}
11
/>
A Tailwind class on one of these keys wins over the default styles without !important. Setting a component token's CSS variable on the root has no effect, so set the token in your theme or style the part.