Dropzone

Allows users to drag-and-drop files into a container to upload or process them.

Powered by

React DropzoneLucide

Installation

npx shadcn@latest add @redpanda/dropzone

pnpm dlx shadcn@latest add @redpanda/dropzone

yarn dlx shadcn@latest add @redpanda/dropzone

bunx shadcn@latest add @redpanda/dropzone

nubx shadcn@latest add @redpanda/dropzone

aube dlx shadcn@latest add @redpanda/dropzone

When to use

Use this decision tree to determine when to use the Dropzone component:

Features

• Drag and drop files to upload
• Customize the empty state and content
• Intelligently handle file types, sizes, and counts
• Show file names and sizes in a human readable format
• Handle errors and reject files
• Disable the dropzone when needed
• Customize the appearance with className
• Show file previews for images
• Replace existing files by dragging new ones
• Context provider for accessing dropzone state

Examples

With min and max sizes

Multiple files

Images only

With custom empty state

Showing an image preview

Avatar upload

Per-file upload progress

Sortable gallery

Table

This example simulates uploads locally; files stay in the browser. The table displays file icons, progress and every failure message. Retry restarts only that file, removing the selected file clears its picker summary, and Download saves the original local file contents. The table uses the standard cell grid and owned destructive retry recipe rather than custom cell padding or button colors.

Props

Credits

• We use Kibo UI for the dropdown menu component and style.

Error ownership and action layout

Dropzone displays all validation failures with filenames and associates the error with its native action. onError is optional; use it for notifications or telemetry, not a duplicate validation alert. Rejection notifications use an AggregateError with every file reason. A later accepted selection clears the built-in message. Synchronous onDrop failures and picker/validator errors are visible too.

Use appearance="avatar" for the circular avatar picker. Other upload actions use the default recipe. className controls the outer layout; the ref still targets the native button. The native file input remains hidden beside the button. Custom content inside the action must be phrasing-only and contain no independent controls; put separate actions outside Dropzone.