- Docs
- components
- Color Pickers
Color Pickers
Examples of combining the Primitives to create a full color picker
This project is archived.
shadcn/ui now officially supports React Aria Components. Use shadcn/ui instead
Examples of combining the Primitives to create a full color picker
The following are examples of how you can combine the Primitives to create a full color picker.
npx shadcn@latest add https://jollyui.dev/default/colorYou can make an eyedropper component by using a Button and react-aria context. Check browser support here.
For example:
function EyeDropperButton() {
let state = React.useContext(ColorPickerStateContext)!
// Check browser support. ()
// @ts-expect-error
if (typeof EyeDropper === "undefined") {
return null
}
return (
<Button
aria-label="Eye dropper"
size="icon"
variant="outline"
onPress={() => {
// @ts-expect-error
new EyeDropper()
.open()
.then((result: { sRGBHex: string }) =>
state.setColor(parseColor(result.sRGBHex))
)
}}
>
<Pipette />
</Button>
)
}