All components
Color Picker
Swatch trigger and checkerboard swatch grid with a selection indicator, from 2xs to 2xl.
Variants
outline
subtle
Sizes
2xs
xs
sm
md
lg
xl
2xl
Install
zsh — color-picker
1bunx stylexblocks add color-pickerUsage — Ark UI
color-picker.tsx
1234567891011121314151617181920212223242526272829303132333435363738import { ColorPicker, parseColor } from "#components/ui/ark-ui/color-picker.tsx";
const swatches = ["#ef4444", "#22c55e", "#6366f1", "#a855f7"];
export function Example() { return ( // variant/size resolve once on Root; every part inherits them via // context — SwatchIndicator ships a default check and only shows on the // selected swatch <ColorPicker.Root defaultValue={parseColor("#6366f1")} variant="outline" size="md"> <ColorPicker.Label>Brand color</ColorPicker.Label> <ColorPicker.Control> <ColorPicker.Trigger> <ColorPicker.ValueSwatch /> <ColorPicker.ValueText /> </ColorPicker.Trigger> </ColorPicker.Control> <ColorPicker.SwatchGroup> {swatches.map((hex) => ( <ColorPicker.SwatchTrigger key={hex} value={hex}> <ColorPicker.Swatch value={hex}> <ColorPicker.SwatchIndicator /> </ColorPicker.Swatch> </ColorPicker.SwatchTrigger> ))} </ColorPicker.SwatchGroup> <ColorPicker.HiddenInput /> </ColorPicker.Root> );}
// the full picker popup composes the same way:// <ColorPicker.Positioner>// <ColorPicker.Content>// <ColorPicker.Area><ColorPicker.AreaBackground /><ColorPicker.AreaThumb /></ColorPicker.Area>// <ColorPicker.ChannelSlider channel="hue">…</ColorPicker.ChannelSlider>// </ColorPicker.Content>// </ColorPicker.Positioner>