Image picker components

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.

Image picker example

Get the code

or drag and drop

Exposure
Contrast
Saturation
Temperature
Tint
Highlights
Shadows

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:

Image picker

Get the code

or drag and drop

Exposure
Contrast
Saturation
Temperature
Tint
Highlights
Shadows

API reference

Import the parts and assemble them:

import { ImagePicker } from "@/components/application/image-picker/image-picker";
 
<ImagePicker.Provider>
    <ImagePicker />
</ImagePicker.Provider>
 
<ImagePicker.Provider>
    <ImagePicker.FillModeSelect />
    <ImagePicker.AdjustmentSliders />
</ImagePicker.Provider>

ImagePicker

Image preset — all-in-one layout.

Renders a <div> element.

ImagePicker.AdjustmentSliders

Adjustment sliders.

Renders a <div> element.

ImagePicker.FillModeSelect

Fill mode select.

Renders Button.

ImagePicker.Provider

Image color state provider.

Import ImageProvider from @/components/application/image-picker/image-picker-context. Renders ImageColorPickerProvider.

ImagePicker.Provider props
PropTypeDefaultDescription
children* (required)ReactNode—The image picker parts that read and update the shared image state.
onImageChange((file: File | null) => void)—Called when an image file is selected or cleared.
onAdjustmentsChange((adjustments: ImageAdjustments) => void)—Called when image adjustments change.

FAQs

Please refer to our frequently asked questions page for more.

There are 7 adjustment sliders: exposure, contrast, saturation, temperature, tint, highlights and shadows. Each ranges from -100 to 100 and starts at 0. Pass onAdjustmentsChange to ImagePicker.Provider to receive the full adjustments object whenever a slider moves.

The fill mode dropdown offers "fill" (the default), "fit", "crop" and "tile". "fit" shows the whole image on a black background, "tile" repeats it in a grid of square tiles, and "fill" and "crop" currently render the same way: the image is scaled to cover the square canvas and the overflow is cropped.

Users can click to upload or drag and drop a file onto the canvas; only image/* files are accepted. Use the onImageChange callback on ImagePicker.Provider to receive the selected File.

Yes. The rotate button next to the fill mode dropdown turns the image 90 degrees clockwise on each click, cycling through 0, 90, 180 and 270 degrees, and the canvas preview updates immediately.

Yes. ImagePicker.FillModeSelect and ImagePicker.AdjustmentSliders can be placed anywhere inside an ImagePicker.Provider, and the useImageColorPicker hook gives you the shared state and actions (including rotateImage and resetAdjustments). Every part, including ImagePicker itself, throws an error if it is rendered outside the provider.

The picker does not export a processed file. onImageChange gives you the original File and onAdjustmentsChange the slider values; fill mode and rotation are available through useImageColorPicker().state. To produce the final image, call applyImageFilters from image-picker-utils.ts with your own canvas and those values.

Header navigationsInline CTAs