File Drop

Interactive

A demo drag-and-drop dropzone (no real upload) that highlights and lifts its icon on drag-over, accepts drop or click/keyboard browse via a real hidden file input, then lists chosen files as chips with a type icon, size, a fake ease-out progress bar, and a remove button; oversize files are rejected with a shake. Under prefers-reduced-motion it drops the scale, shake, and shimmer and jumps progress straight to done.

Inspired by Cult UI — file upload dropzone (pattern) — independently built, not affiliated. Attribution policy

Click to browse or drag & dropimage/*, application/pdf · up to 5 MB

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/file-drop.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/file-drop.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="w-full max-w-sm"><FileDrop accept="image/*,application/pdf" multiple maxSizeMB={5} /></div>

Props

FileDropProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onDrop">

Prop	Type	Default	Description
accept	string	—	Native `accept` filter, e.g. `"image/*,application/pdf"`.
multiple	boolean	false	Allow selecting/dropping more than one file (chips accumulate).
onFiles	(files: File[]) => void	—	Fired with the files accepted by the last drop/browse (post size check).
maxSizeMB	number	—	Reject (and shake) any file larger than this many megabytes.

npm dependencies

motion
lucide-react