All components
Color Picker
Swatch trigger and checkerboard swatch grid with a selection indicator, from 2xs to 2xl.
Brand color
Variants
Brand color
outlineBrand color
subtleSizes
Brand color
2xsBrand color
xsBrand color
smBrand color
mdBrand color
lgBrand color
xlBrand color
2xlInstall
zsh — color-picker
1bunx stylexblocks add color-pickerUsage — Base UI
color-picker.tsx
123456789101112131415161718192021222324252627282930import { ColorPicker } from "#components/ui/base-ui/color-picker.tsx";
const swatches = ["#ef4444", "#22c55e", "#6366f1", "#a855f7"];
export function Example() { return ( // Base UI has no color-picker machine, so Root owns the color value // (value/defaultValue/onValueChange); the selected SwatchTrigger rings // its Swatch and reveals its SwatchIndicator, and parts compose through // render <ColorPicker.Root defaultValue="#6366f1" variant="outline" size="md"> <ColorPicker.Label>Brand color</ColorPicker.Label> <ColorPicker.Control> <ColorPicker.Trigger> <ColorPicker.Swatch /> <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.Root> );}