Gradient Picker is an open-source React component built with Shadcn UI, Radix UI, and Tailwind CSS that lets users browse, select, and copy solid colors, gradients, and background images.
What is Gradient Picker?
Gradient Picker is a UI component for choosing colors and gradients, designed to be embedded in Next.js and React applications. It takes user selections as input and outputs a chosen solid color, CSS gradient, or background image that can be copied or applied. The picker is built on Shadcn UI, Radix UI primitives, and Tailwind CSS, and is published on GitHub by the Illyism account with a live demo at gradientpicker.vercel.app.
Key Features
- Solid colors — Pick single-color swatches directly from the picker interface.
- Gradients — Browse a curated collection of CSS gradients sourced from GradientPage.
- Background images — Select from GradientPage wallpapers to use as backgrounds.
- Shadcn UI integration — Built as a Shadcn UI component, so it follows the same design patterns and can be customized with Tailwind utilities.
- Radix UI primitives — Uses accessible, unstyled Radix UI components for robust interaction behavior.
- Next.js/React ready — Packaged as a React component that fits into Next.js App Router projects.
- Live demo — Try the component online at gradientpicker.vercel.app.
- Affiliate program — App developers can earn 80% commission (up to $60 per customer) by linking to GradientPage premium wallpapers.
Who is it for?
- React/Next.js developers who need a ready-made gradient and color picker component for their application's UI.
- Designers and frontend builders who want to generate Shadcn UI color themes from a hex value, using the example at gradient.page/hex/FCD917.
- Affiliate marketers who build apps and want to monetize by promoting GradientPage's premium wallpaper library.
What can you do with Gradient Picker?
- Generate Shadcn UI themes: Use the picker to derive color themes for Shadcn UI from any hex code via the GradientPage hex tool.
- Embed a picker in your app: Drop the component into your React or Next.js interface to let users choose colors, gradients, or background images.
- Create background selections: Combine the picker with GradientPage's wallpaper collection to add ready-to-use background options to your product.
FAQ
Is Gradient Picker free?
Yes, the component code is open source under the MIT License, and the live demo is freely accessible.
Can I use the background images commercially?
The GradientPage background images are free for non-commercial use only. For commercial use, you need to purchase a license on GradientPage or join the affiliate program, which grants commercial rights to the samples.
What tech stack does Gradient Picker use?
It is built with Shadcn UI, Radix UI, Tailwind CSS, and React, and is designed to work in Next.js projects.
How do I get the code?
You can access the live demo at gradientpicker.vercel.app and the code plus documentation at gradient.page/picker.
