Skip to content

Foundations

Drop Zone

Drag-and-drop file target for a chat — accepts types and size limits, shows why a file was rejected.

2 variantsMIT

Preview

Drop files here

PDF, images, CSV · up to 10.0 MB

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

pnpm dlx shadcn@latest add https://tuffui.com/r/drop-zone.json

Usage

Pass your own data and wire the callbacks to your agent runtime.

import { DropOverlay, DropZone } from "@/components/ui/drop-zone";

<DropZone
  accept="application/pdf,image/*,.csv"
  maxSize={10 * 1024 * 1024}
  onFiles={(files) => upload(files)}
/>

// Over a whole chat: shows an overlay while files are dragged in.
<DropOverlay accept="image/*,.pdf" onFiles={attach}>
  <ChatThread data={thread} />
</DropOverlay>

Props

PropTypeDefaultDescription
onFiles*(accepted: File[]) => void—Files that passed the rules.
onReject(rejected: { file; reason }[]) => void—Files turned away, with a readable reason. DropZone also lists them.
acceptstring—MIME types or extensions, like "image/*,.pdf".
maxSizenumber—Bytes per file.
multiplebooleantrueAllow several files.
maxFilesnumber—Most files per drop.
title / hintstring—DropZone text; the hint defaults to the rules.
showboolean—DropOverlay: force the overlay, e.g. for a page-level drag you track.
function checkFiles(files: File[], rules: FileRules): {
  accepted: File[];
  rejected: { file: File; reason: string }[];
};