Powerful and customizable React gradient picker components built for modern applications and websites. These gradient pickers are built using React Aria and styled with Tailwind CSS.
Stops
Saved
Installation
You can add this gradient picker component using our CLI or manually:
npx untitledui@latest add gradient-picker
Gradient picker examples
Below are examples and variations of this gradient picker component:
Stops
Saved
FAQs
Please refer to our frequently asked questions page for more.
The gradient picker supports four gradient types: "linear", "radial", "angular" (conic), and "diamond". You can switch between types using the built-in type selector dropdown.
You can add new stops by clicking on an empty area of the gradient slider, or by using the add button in the stop list. Stops can be removed by selecting a stop and pressing Delete/Backspace, or by clicking the remove button in the stop list. A minimum of 2 stops is always enforced.
Yes, you can control the gradient angle by dragging the endpoints on the 2D gradient area, or programmatically via the defaultAngle prop on GradientPicker.Provider. The onAngleChange callback fires when the angle is modified.
Yes, the gradient picker uses a compound component pattern. You can use GradientPicker.Area, GradientPicker.Slider, GradientPicker.StopList, GradientPicker.TypeSelect, and GradientPicker.Reverse independently within a GradientPicker.Provider wrapper.
Use the onStopsChange callback on GradientPicker.Provider to receive updated gradient stops. The component also provides utility functions to convert stops into CSS gradient strings using the toGradientCSS() helper.