Dropzone

Lightweight file drop zone with browse, validation, image previews, and optional progress. Built on native drag and drop — no upload library. Control chrome matches SonoJS rounded-[12px] surfaces.

Gallery

Polished media card: format chips, image dropzone, and simulated upload progress.

Loading…

Installation

CLI

npx @sonojs/ui@latest add dropzone

Also needs

npx @sonojs/ui@latest add button progress

npm i lucide-react

Usage

dropzone.tsx

import { Dropzone } from "@/components/dropzone"

export function Example() {
  return (
    <Dropzone
      accept="image/png,image/jpeg,application/pdf"
      maxSize={5 * 1024 * 1024}
      maxFiles={5}
      multiple
    />
  )
}

Props

Prop	Type	Default	Description
value	DropzoneFile[]	-	Controlled file list.
defaultValue	DropzoneFile[]	[]	Initial files when uncontrolled.
onValueChange	(files: DropzoneFile[]) => void	-	Fires when the file list changes.
onReject	(rejections: DropzoneRejection[]) => void	-	Fires for files rejected by type, size, or maxFiles.
accept	string	-	HTML accept string, e.g. `image/*,application/pdf`.
maxSize	number	-	Max bytes per file.
maxFiles	number	Infinity	Max files allowed in the list.
multiple	boolean	true	Allow selecting more than one file at a time.
disabled	boolean	false	Disables the zone and remove actions.
label	string	"Drop files here or browse"	Primary text inside the drop zone.
description	string	-	Hint under the label. Defaults from accept / maxSize / maxFiles.
className	string	-	Merge Tailwind classes on the root.