Looking for an up-to-date ColorPicker component

Hello.

I am looking for an up-to-date ColorPicker component to use in one of my projects.

I stumbled across the following Cookbook page:
https://cookbook.vaadin.com/allow-user-to-pick-a-color
I don’t see any import for this ColorPicker component, but it gives me the vibe of being an official flow component. I didn’t find anything about such a component in Vaadin 24 documentation, so can you please tell me - if you have any idea - what’s the import for that ? Is it still available?

Also found this in Vaadin directory:
https://vaadin.com/directory/component/colorpicker
But people in the comments are stating this triggers a Webpack build instead of Vite and it makes me hesitant to use it - I don’t want to break my current build.

What recommendations do you have on this topic?
Thanks!

The cookbook recipe is using the browser color picker, nothing to import. EDIT: https://caniuse.com/input-color

Tha cookbook has two java classes; how to use and the java class of the color picker.

If I install the app on Android / iOS-based mobile devices, would I still be able to use any kind of native color picker (like the one in the cookbook)?

I guess it will use the browser of the mobile and it seems supported (see the link caniuse).
But I’m not sure what you mean with install the app, since it’s a website (or a PWA)

Some time ago I managed to “deploy” the flow-crm-tutorial example app on my smartphone. I’m pretty sure I used this:
https://vaadin.com/docs/latest/configuration/pwa

Also, do you plan to (re?)-add an official component in the future? I stumbled across some older tests using this: com.vaadin.ui.components.colorpicker , which makes me think at some point it was available.

Vaadin 6-8 used to have one, but that was before browsers had a native one consistently

It’s not a very frequently requested component, I couldn’t even find a GitHub ticket

I managed to integrate the browser native color picker into a custom Component, works fine.
The only downside - on certain browsers (ex. desktop Firefox on Windows) looks like crap because it uses the system’s native color picker.
Overall, it doesn’t perfectly blend in with Vaadin’s look, but works. I understand why it’s not very requested, but an official Component would be a better fit (like the current DateTimePicker). Maybe in the future you’ll get more requests and the necessary funds.
Anyway, thanks for the responses!

But people in the comments are stating this triggers a Webpack build instead of Vite and it makes me hesitant to use it

The issue is fixed in the latest version.

BTW. If you want a component that looks the same on all browsers, try this add-on: Colorful - Vaadin Add-on Directory

Perhaps this onde? https://v-herd.eu/tatulund-addons/colorpickerview