FormsFree

Drop Zone

A drag-and-drop file upload target with a click-to-browse fallback.

Usage

Drop files here or browse

Any file type

bash

npm install @wunderui/react

Then import what you need:

tsx

import { DropZone } from "@wunderui/react"

Drop files here or click to browse — empty, and with a hint about accepted file types.

Drop files here or browse

Any file type

Drop files here or browse

Accepts images

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

Drop or pick images and they join the list below; each row can be removed again.

Drop files here or browse

Accepts images

hero.png1.1 MB