Dropzone
The Dropzone component is a file input rendered as a dashed drop target. It supports click-to-browse and drag & drop, validates files against accept, $maxFiles, and $maxBytes, and shows preview thumbnails with remove buttons for the selected files.
The upload itself stays in your hands: the component only manages the file list and hands you File objects.
import React from "react";
import { Dropzone } from "cherry-styled-components";
export default function Page() {
return (
<Dropzone
accept="image/png,image/jpeg,image/webp"
multiple
$maxFiles={5}
$maxBytes={5 * 1024 * 1024}
$prompt="Drag images here"
$browse="or click to browse"
$hint="PNG, JPG or WebP · up to 5MB · max 5 files"
$icon="ImageUp"
onFilesChange={(files) => console.log(files)}
onFilesRejected={(rejections) => console.warn(rejections)}
/>
);
}The inline variant is a compact horizontal row with a transparent background for embedding inside forms or modals. Without multiple, selecting a new file replaces the current one:
<Dropzone $inline accept="image/*" $prompt="Drag an image here" />Properties
Bold primary prompt line. Defaults to "Drag & drop files here".
Optional "or click to browse" sub-line beneath the prompt.
Optional smaller hint line for accepted types and limits.
Name of the Lucide icon shown in the rounded tile. IconProps is a string union of all Lucide icon names, not an object. Defaults to "FileUp".
Compact horizontal variant with a transparent background.
Maximum number of files kept at once (with multiple).
Maximum size per file in bytes.
Called with the full current file list whenever it changes.
Called with the rejected files and a typed reason ("type", "size", or
"count") so you can surface errors however you like, for example with a
Toast.
Native accept filter. Also enforced for dropped files, including .ext and
type/* patterns.
Allows selecting several files. Without it, a new file replaces the current one.
Cherry theme object.