Dropzone

"use client";

import { FileIcon } from "lucide-react";

About#

The <Dropzone /> component is built on top of react-dropzone.

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add junwen-k/ui-x/dropzone
Copy

Usage#

Copyimport {
  Dropzone,
  DropzoneDescription,
  DropzoneGroup,
  DropzoneInput,
  DropzoneTitle,
  DropzoneUploadIcon,
  DropzoneZone,
} from "@/components/ui/dropzone";

Copy<Dropzone
  accept={{
    "image/*": [".jpg", ".png"],
    "application/pdf": [".pdf"],
  }}
  onDropAccepted={setFiles}
>
  <DropzoneZone>
    <DropzoneInput />
    <DropzoneGroup className="gap-4">
      <DropzoneUploadIcon />
      <DropzoneGroup>
        <DropzoneTitle>Drop files here or click to upload</DropzoneTitle>
        <DropzoneDescription>
          You can upload files up to 10MB in size. Supported formats: JPG, PNG,
          PDF.
        </DropzoneDescription>
      </DropzoneGroup>
    </DropzoneGroup>
  </DropzoneZone>
</Dropzone>

Examples#

Default#

"use client";

import { FileIcon } from "lucide-react";

Trigger#

import { Button } from "@/components/ui/button";
import {
  Dropzone,

Form#

"use client";

import { FileIcon, XIcon } from "lucide-react";

Accessibility#

The zone is focusable and opens the file dialog with Enter or Space, so the drag-and-drop interaction always has a keyboard equivalent. Make sure the zone contains visible text describing what to upload (such as <DropzoneTitle /> and <DropzoneDescription />) — the upload icon alone is not an accessible name. Drag states are conveyed with color and iconography via <DropzoneUploadIcon />; keep the title text meaningful so the state change is not communicated by color alone.

API Reference#

Styled wrappers around the Dropzone primitive — see the primitive page for the full prop tables.

Dropzone#

Wraps Root and accepts all react-dropzone options (accept, maxFiles, onDropAccepted, …).

DropzoneZone#

Wraps Zone with dashed-border styling that reacts to the drag state data attributes.

DropzoneInput#

Wraps Input, the visually hidden file input.

DropzoneTrigger#

Wraps Trigger for opening the file dialog from a button outside the zone.

DropzoneUploadIcon#

A convenience part that renders an upload, accepted or rejected icon based on the current drag state, using the DragDefault, DragAccepted and DragRejected parts. Accepts lucide-react icon props.

DropzoneGroup, DropzoneTitle, DropzoneDescription#

Layout and typography parts for the zone's content. Render a <div>, <h3> and <p> respectively, and support the render prop.

DropzoneAccepted, DropzoneRejected#

Wrap Accepted and Rejected, render-prop parts receiving the accepted files or rejections.