KQ-494 · CATCH/ZONE

Catch Zone

A file drop zone that braces. Dragging files over it pulls the dashed frame tight — dash and gap interpolate from one value, so the frame stitches rather than blinks — and contracts the panel 1.5% on flick; leaving relaxes both. Accepted files land as rows on glide arriving from distances.step, each size stamping itself down on recoil while a progress fill runs on a linear tween, and a refused file gets no celebration at all: the frame nudges 4px on a tween and an alert says why. A real file input sits behind the button, so the keyboard path is the platform's own picker rather than a re-implementation.

KQ-494 · CATCH/ZONE

Drop Basinworks invoices

.pdf, .csv, image/* · up to 4.0 MB

0 files · 0 B

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/catch-zone

Props

accept: string; default —; Accepted MIME types or extensions, comma separated — ".pdf,.csv,image/*".
multiple: boolean; default true; Allow more than one file; with it off, a new drop replaces the held file.
maxSize: number; default —; Bytes; larger files are rejected with a reason.
onFiles: (files: File[]) => void; default —; Fires with the full accepted list after every add or remove.
label: string; default —; Zone caption, shown above the picker button.
progress: Record<string, number>; default —; Upload progress 0–1 per file, keyed by the exported fileKey(file).

Prop	Type	Default	Description
accept	string	—	Accepted MIME types or extensions, comma separated — ".pdf,.csv,image/*".
multiple	boolean	true	Allow more than one file; with it off, a new drop replaces the held file.
maxSize	number	—	Bytes; larger files are rejected with a reason.
onFiles	(files: File[]) => void	—	Fires with the full accepted list after every add or remove.
label	string	—	Zone caption, shown above the picker button.
progress	Record<string, number>	—	Upload progress 0–1 per file, keyed by the exported fileKey(file).