ns-ui
File dropzone as a thermal field: dragging spawns rising accent convection wisps, accepted drops buoy off the drop point and squash-land into a docked queue rack, rejected files sink and fade.
Use when a dropzone where the moment that matters is the drop itself, drag-over raising convection wisps and accepted files buoying off the drop point into a docked queue while rejects sink and fade; pick file-upload-seal instead when what matters is a file's progress after it lands, since there the gap between outline and card is the remaining upload.
Install
npx shadcn add https://design.helpmarq.comns-ui / file-upload-thermal — accepted files rise, rejected files sink
Attach logs and screenshots for the render team. Drops ride the thermal into the queue; anything oversize or off-type sinks.
Attachments
Drop files to attach, or
PNG, JPG, PDF, LOG, TXT · max 8.0 MB
2 files attached · draft saved
Drag files over the zone to stir up convection wisps. Accepted drops buoy off the drop point, sway, and squash-land in the rack; rejected files sink and fade. Focus a docked chip and press Delete to remove it.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultFiles? | { name: string; size: number; type: string }[] | [] | files shown pre-docked in the queue rack |
| accept? | string[] | [] | allowed types: extensions (".png") or mime ("image/png", "image/*"); empty = any |
| maxSizeBytes? | number | 8 * 1024 * 1024 | — |
| onFilesChange? | (files: UpdraftFile[]) => void | — | — |
| className? | string | — | — |
| aria-label? | string | "Upload files" | — |