Components
Dropzone
Drag, drop, or click to browse.
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/dropzone.jsonDragging is the fast path, not the only path
The whole target is a real <button> wrapping a hidden file input. It can be
tabbed to and activated with Enter, and clicking opens the picker. A drop target
that only accepts drops excludes everyone not using a mouse — and on a phone,
everyone.
The well, not a dashed box
An 8px bg/subtle frame around a radius/lg target, so it reads as a recess
rather than a dashed rectangle floating on the page. Active turns the target
bg/brand-tint with a focus border; error turns it bg/error-tint and replaces
the hint with the reason.
| Prop | Type | Default | Description |
|---|---|---|---|
| onFiles | (files: File[]) => void | — | Fires for both drops and picks. |
| accept / multiple | string / boolean | — | Passed to the input. |
| title / hint | string | — | State the limits in the hint — size and formats. |
| error | string | — | Replaces the hint and puts the target in its error state. |