Back to Forms & Inputs
File Uploader
A dashed drop zone that accepts both click-to-browse and drag-and-drop, with a selected-file row (name, size, remove) once something's chosen.
cover-photo.png
1.4 MB
Square images look best (min. 400×400px).
Forms & Inputsuploaddrag-dropfileimage
Stack: React + Tailwind CSS + shadcn/ui — every prompt is written for this stack and is most accurate in it.
Dependencies: lucide-react
Overview
Layout
Dashed drop zone (label-wrapped input) + selected-file row
Drag state
border-primary + bg-primary/5 while a file is dragged over
Selected file
Name/size row with its own remove button, not the drop zone
Input
The real <input type="file"> stays sr-only, not display:none