Powerful and customizable React image picker components built for modern applications and websites. These image pickers are built using React Aria and styled with Tailwind CSS.
or drag and drop
Installation
You can add this image picker component using our CLI or manually:
npx untitledui@latest add image-picker
Image picker examples
Below are examples and variations of this image picker component:
or drag and drop
FAQs
Please refer to our frequently asked questions page for more.
The image picker provides 7 adjustment sliders: exposure, contrast, saturation, temperature, tint, highlights, and shadows. Each slider ranges from -100 to 100, with 0 as the default neutral value.
The image picker supports four fill modes: "fill" (stretches to fill), "fit" (scales to fit within bounds), "crop" (fills and crops overflow), and "tile" (repeats the image in a tile pattern).
The image picker supports both click-to-upload and drag-and-drop file selection. Use the onImageChange callback on ImagePicker.Provider to receive the selected File object when a user uploads an image.
Yes, the image picker includes a rotation button that rotates the image 90 degrees clockwise on each click. The rotation is applied in real-time to the canvas preview.
Yes, the image picker uses a compound component pattern. You can use ImagePicker.FillModeSelect and ImagePicker.AdjustmentSliders independently within an ImagePicker.Provider wrapper to build custom layouts.