Add a color picker

[laycookie]

Recently needed a color piker component in my project and I'm just wondering if it will make sense to have one here, Shadcn/ui does have a calendar so why not a color piker? I'm interested if this component is in plans or can I make one and open a pull request?

[NikharPandya]

@laycookie , at this moment components are built with radix ui primitives. So will only have components made with them. Stay tuned in future for updates.

[Illyism]

@laycookie I made a color + gradient + image picker.

Docs: https://gradient.page/picker
Github: https://github.com/illyism/gradient-picker

[FelipeCosta401]

I'm trying to use this example with Vite and i'm getting a 504 status code. I saw u using "use-client" in the begining of the code, i think thats next.js, right? Is there a way for me to use ur component with Vite ?? I'm kind lost because I still learing how to code. May someone help me pls? thx

[nathan-hello]

@FelipeCosta401 "use client" just means that it's a normal React component. There isn't anything different about NextJS client components and React components in Vite. If you're seeing a 504 in your console log, could you share what the output of your terminal is that's running vite? There should be some error information there.

[PabloResende]

😎😎😎

[Illyism]

Add one more example:

• https://gradient.page/hex/CCFF00

[untitledappseu]

Yeah please add Color Picker

[nightspite]

Example: https://shadcn-color-picker.vercel.app

CleanShot.2024-05-22.at.16.08.17.mp4

[Absleepy]

@Illyism The link you shared is great. But it's not a color picker. It's more of a color selector.
Would be great if user could drag around on a color picker.
Cheers

[cael-prussian]

https://v0.dev/chat/color-picker-component-2sBBFCIJr4q?b=b_osv3Z2Pc2fg

[mlc-studio]

There is a bug with your color picker (try up right corner, instead of the color you have white)

[cael-prussian]

The top edge should actually be full light/white. The issue is the styling of the HSA diagram isn't great, I slapped it together in 5 minutes without touching any code using v0 😅 so probably needs a bunch of testing before being used anywhere.

Using a design tool like Figma would probably get a better gradient for the HSA picker area but something like this works (line 150 of advanced-color-picker.tsx)

linear-gradient( 180deg, #fff 0%, rgba(128, 128, 128, 0) 50%, #000 100% ), radial-gradient( ellipse at 100% 50%, hsl(${hsl.h}, 100%, 50%) 0%, transparent 100% )
https://v0.dev/chat/color-picker-component-2sBBFCIJr4q?b=b_osv3Z2Pc2fg&p=0

[yymm120]

very beautiful, but many bugs.
Looking forward to it.

[vatsalpipalava]

https://shadcn-input-color.vercel.app