Component reference
Dropzone
Upload and review a collection of brand assets.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
SVG, PNG, JPG or WEBP. Drop up to 6 files, 8 MB each.
Width adapts to the available space
"use client";
import { useState } from "react";
import { Dropzone, Badge, Button } from "@pimolu/react";
function BrandAssets() {
const [files, setFiles] = useState<File[]>([]);
return (
<div className="grid gap-5 min-w-0">
<Dropzone
label="Brand assets"
description="SVG, PNG, JPG or WEBP. Drop up to 6 files, 8 MB each."
accept=".svg,image/png,image/jpeg,image/webp"
multiple
maxFiles={6}
maxSize={8 * 1024 * 1024}
files={files}
onFilesChange={setFiles}
validateFile={(file) => file.name.toLowerCase().includes("placeholder")
? "Replace placeholder files with the final export."
: null}
/>
<div className="flex flex-wrap items-center gap-3 min-w-0 justify-between">
<Badge variant={files.length === 0 ? "neutral" : "primary"}>
{
files.length === 0
? "Brand kit empty"
: `${files.length} asset(s) added`
}
</Badge>
<Button
type="button"
size="sm"
appearance="ghost"
disabled={files.length === 0}
onClick={() => setFiles([])}
>
Clear assets
</Button>
</div>
</div>
);
}
export function DemoExample() {
return (<BrandAssets />);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Image previews
Dropped or selected images show a thumbnail from a local object URL; other files keep the document icon. showPreviews={false} opts out.
Uncontrolled
defaultFiles seeds the list and the component keeps the next value itself.
States
An external error marks the zone invalid; disabled keeps it visible but inert.
Usage
Support file selection as well as dragging, and keep upload/network state in the application.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluDropzoneProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
files | File[] | undefined | — | Controlled list of files. |
defaultFiles | File[] | undefined | an empty list | Initial files when uncontrolled. Defaults to an empty list. |
onFilesChange | ((files: File[]) => void) | undefined | — | Called with the complete next list after a drop or a removal. |
accept | string | undefined | — | Native accept string, for example `"image/*,.pdf"`. Used both by the file input and by the validation of dropped or selected files. |
multiple | boolean | undefined | true | Allow more than one file. Defaults to true. |
maxFiles | number | undefined | — | Maximum number of files kept. Omit for no limit. |
maxSize | number | undefined | — | Maximum size of a single file, in bytes. Omit for no limit. |
disabled | boolean | undefined | false | Disable the zone, the input and every remove button. |
label | ReactNode | — | Visible label. |
description | ReactNode | — | Supporting text below the label. |
error | ReactNode | — | Error text; also marks the control as invalid. |
validateFile | PimoluDropzoneValidator | undefined | — | Extra per-file validation, applied after accept and maxSize. |
removeFileLabel | ((file: File) => string) | undefined | `Remove <name>` | Accessible name of a remove button. Defaults to `Remove <name>`. |
showPreviews | boolean | undefined | true | Show an image thumbnail for image files. Other files keep the document icon. Defaults to true. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
children | ReactNode | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLDivElement> | undefined | — | Standard React/HTML attribute. |
filesFile[] | undefinedNo default extracted.
Controlled list of files.
defaultFilesFile[] | undefinedDefault: an empty list
Initial files when uncontrolled. Defaults to an empty list.
onFilesChange((files: File[]) => void) | undefinedNo default extracted.
Called with the complete next list after a drop or a removal.
acceptstring | undefinedNo default extracted.
Native accept string, for example `"image/*,.pdf"`. Used both by the file input and by the validation of dropped or selected files.
multipleboolean | undefinedDefault: true
Allow more than one file. Defaults to true.
maxFilesnumber | undefinedNo default extracted.
Maximum number of files kept. Omit for no limit.
maxSizenumber | undefinedNo default extracted.
Maximum size of a single file, in bytes. Omit for no limit.
disabledboolean | undefinedDefault: false
Disable the zone, the input and every remove button.
labelReactNodeNo default extracted.
Visible label.
descriptionReactNodeNo default extracted.
Supporting text below the label.
errorReactNodeNo default extracted.
Error text; also marks the control as invalid.
validateFilePimoluDropzoneValidator | undefinedNo default extracted.
Extra per-file validation, applied after accept and maxSize.
removeFileLabel((file: File) => string) | undefinedDefault: `Remove <name>`
Accessible name of a remove button. Defaults to `Remove <name>`.
showPreviewsboolean | undefinedDefault: true
Show an image thumbnail for image files. Other files keep the document icon. Defaults to true.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
childrenReactNodeNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLDivElement> | undefinedNo default extracted.
Standard React/HTML attribute.
Accessibility
- Keyboard users need the same file-picker path and rejection information as pointer users.