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.

[kerryj89]

Documentation link is dead. Seems a bit spammy with the ad/commission stuff weaved into the demo. Looks like it's good for picking premade selections, a color picker in the simplest sense with no color wheel. Strangely there is an input to override and enter your own color? Maybe that's an optional thing.

[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

[kerryj89]

I think this is great for simple customer edits e.g. branding colors for customers. A bit strange that there is no spacing between the picker area and input but easily fixable.

[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.

[kerryj89]

I like this but if you drag the hue slider to the end quickly it resets to the left. It feels like a color picker catered towards more advanced users or WYSIWYG editors, almost like a color picker app to itself :)

[vatsalpipalava]

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

[kerryj89]

Best one here that I've tried, nice work

[karticme]

[kerryj89]

This one is also nice, but a bit unexpected that opacity control locks you into hex mode.

[karticme]

Yes, that's because of width issue but working on it and will be fixed and releasing it to public use shortly.

[karticme]

@shadcn I have created this Color Picker component with React Aria Components and Shadcn UI. Take a look https://kartic-colors.vercel.app
It's fully modular, customisable and clean. Let me know what do you think about it.
I want contribute with this component.
- kartic

[Prajwal-alphanimble]

you might wanna check out this discussion where I implemented a new resizable and dragable dashboard layout... this can be very helpfull to many developers in making analytic, sharable dashboard, the users can alter the dashboard based on their liking...

The disscussion link: #10466

[TheAleSch]

I have added a new compliant color picker that supports different modes, it's on the registry already and you can find a demo at https://amplo.ale.design/ - completely accessible and supporting oklch and p3 color spaces.

[brentertz]

Super nice! Any plans for a base-ui version?

[TheAleSch]

For sure! I'm just finishing the gradient fill picker first.

[TheAleSch]

Super nice! Any plans for a base-ui version?

@brentertz baseUI live =) and the default