shadcn.io is not affiliated with official shadcn/ui
File Manager Skeleton Block for Radix UI
A cloud storage folder that loads in place: the path, Upload and column heads stay while bars become type icons, names, sizes and dates, folders first.
Installation
Overview
Show a folder while its files load, with this file manager skeleton for React with Radix UI. A hairline frame with a plus mark on each corner holds a path band, with the route (My files / Design / Exports) as a Breadcrumb and an outline Upload Button, over a native table of seven items from Cartouche, cloud file storage, folders first. The path, Upload and the column heads (Name, Size, Modified) are real from the first paint; each item's type icon and name, its size, its date and its more button are Skeleton bars that become the data in the same cell, row by row, when you press Load. Upload, the more buttons and the crumbs that would open another folder say they are not wired in this demo. On a phone the size and the date fold under the name. It's built from Skeleton, Breadcrumb, Button and Guides, with a CSS entrance only. For storage browsers, asset libraries and document lists.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The seven items are typed in ITEMS, 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.
Why is the path real while the files are bars?
The route is known before the folder's contents are: it comes from the address, not from the data. Showing it at once tells people where they are while the list loads. Wire the crumbs to your router; here they only say they are not wired.
How are the type icons chosen?
Each item carries its icon in the typed data, folders first and then files by name, as a browser sorts them. Choose the icon from your own file type when you fetch the list, and the bar and the row stay the same size.
Does the table keep its height while it loads?
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 files…", 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. Each item's more button is named for the item ("More actions for Brand guide.pdf").