Dropzone

Installation

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

You can combine the <Table /> component with file upload functionality to create a table-based file upload interface. This example shows how to display uploaded files in a table format with file icons, progress indicators, and action buttons.

Props

Credits

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

Recent changes

• patchv1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested b…#133
• minorv1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121
• minorv1.0.0Post-Base-UI polish. Public API unchanged.#116
• majorv1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114
• minorv0.3.0Add theme-provider component to the registry with documentation and tests. Includes playground type improvements (export RegistryItem, remove as-const boilerplate) and docs site dark mode border color fix.#109

See full history →