---
title: "Dropzone"
description: "A dashed area that takes dropped files or opens the file picker on click, Enter or Space, with a drag-over state and an overlay mode."
plan: Free
docs: https://ui.edbn.me/docs/components/dropzone
---

# Dropzone

A dashed area that takes dropped files or opens the file picker on click, Enter or Space, with a drag-over state and an overlay mode.

## Installation

```bash
npx shadcn@4.19.0 add https://ui.edbn.me/r/dropzone.json
```

## Dependencies
- npm: @base-ui/react@^1.8.0
- edbn: edbn-base

## Usage

```tsx examples/dropzone-basic.tsx
"use client";
import * as React from "react";
import { Upload } from "lucide-react";
import {
  Dropzone,
  DropzoneDescription,
  DropzoneIcon,
  DropzoneTitle,
} from "@/components/ui/dropzone";

export default function DropzoneBasicPreview() {
  const [files, setFiles] = React.useState<File[]>([]);

  return (
    <div className="flex w-full max-w-compact flex-col gap-2">
      <Dropzone onFiles={setFiles}>
        <DropzoneIcon>
          <Upload />
        </DropzoneIcon>
        <DropzoneTitle>Upload files</DropzoneTitle>
        <DropzoneDescription>or drop them here</DropzoneDescription>
      </Dropzone>
      <p role="status" className="text-small text-muted-foreground">
        {files.length > 0 &&
          `${files.length} ${files.length === 1 ? "file" : "files"} chosen`}
      </p>
    </div>
  );
}
```

## Files
- components/ui/dropzone.tsx (275 lines)

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt