File dropzone

When to use #

Use it for

Attachments and uploads with type and size limits.
You want to show upload progress per file.

Skip it when

A single small file; a native file input is lighter.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/file-dropzone.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above. It is built from FileDropzone and formatFileSize.

example.tsx

import { useState } from "react"
import { FileDropzone } from "@/components/ui/file-dropzone"

export function AttachmentUpload() {
  const [count, setCount] = useState(0);
  return (
    <div className="grid w-full max-w-md gap-2">
      <FileDropzone label="Attachments" accept="image/*,.pdf" maxSize={5_000_000} onFilesChange={(files) => setCount(files.length)} />
      <p className="text-sm text-muted-foreground">{count} {count === 1 ? "file" : "files"} added.</p>
    </div>
  );
}

API reference #

FileDropzone

component

PropTypeDefault

labelstring"Add files"

descriptionstring"Drop files here, or choose them."

acceptstring—

maxSizenumber—

multiplebooleantrue

onFilesChange((files: File[]) => void)—

onUpload((item: FileDropzoneItem, report: (percent: number) => void, signal: AbortSignal) => Promise<void>)—

disabledboolean—

classNamestring—

formatFileSize

component

No props of its own; it accepts the native props of its root element.

It exposes progressbar, status and alert semantics, with aria-hidden, aria-valuenow, aria-valuemin, aria-valuemax and aria-label kept in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.