shadcn.io is not affiliated with official shadcn/ui
File Upload Skeleton Block for React
A document inbox with a working drop zone over a list of earlier uploads that loads in place, bars becoming names, sizes, scan statuses and full progress bars.
Installation
Overview
Show an upload list while it loads, with a drop zone that already works, using this file upload skeleton for React with Base UI. A hairline frame with a plus mark on each corner holds a File Upload drop zone, a small region that lists the files you choose, and an "Earlier uploads" band, all from Casement, an intake portal for accountants. The zone is real from the first paint: drop files on it or press it to choose some and they are listed by name and size (nothing leaves the tab and no file is opened). The band's heading is real too; the three earlier uploads are Skeleton bars that become a name, a size, a status in words ("Scanned", "Waiting for review") and, for the finished ones, a full Progress bar, row by row, when you press Load. It's built from Skeleton, File Upload, Progress, Badge, Button and Guides, with a CSS entrance only. For document portals, attachments and any list that follows a drop zone.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The three earlier uploads are typed in UPLOADS, Load starts a 700 millisecond timer, and when it ends the phase becomes ready and the data swaps in; Reload goes back to the bars and in again. To wire it for real, delete the timer, the Load button and the polite line, and set data-state (loading or ready) and aria-busy on the region from your query's pending state, or use the bars as a Suspense fallback and render the real rows when they arrive. The bars are derived from the same array as the data, so keep one row component for both. The files you choose are only listed here: send them to your storage in accepted and add the result to the list.
Does the drop zone really take files?
Yes. Dropping files, or pressing the zone to open the picker, lists their names and sizes in the region below it and says so in the polite line. The files are never read or uploaded, and the demo holds no reference to them beyond their name and size, so there is nothing to clean up.
What happens when I choose many files?
The list of chosen files is a fixed-height, scrolling region, so choosing a hundred files does not push the earlier uploads down. It takes keyboard focus so it can be scrolled, and it is named "Files you chose".
Does the panel keep its height while the uploads load?
Each bar and its data sit in one grid cell, so the larger of the two sets the cell's box and the swap changes nothing around it. The table is fixed-layout with set column widths and fixed row heights, the heads and the frame are real in both phases, and the polite line reserves two lines, so the panel is exactly as tall before, during and after loading at every width.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading earlier uploads…", and the polite line announces what loaded once. The bars are hidden from assistive technology and the layer that isn't showing is invisible, so it is neither read nor focusable. The pulse stops when the data is in, and under reduced motion there is no pulse, no spinner and no stagger: the swap is instant. The drop zone is named "Drop documents here, or press to choose them" and is reachable and operable with the keyboard.