shadcn.io is not affiliated with official shadcn/ui
Collaborative File Upload Block for React
A shared folder window for a design team: a roster of people with upload counts that filters the list, files marked Uploaded by, and a comment thread with a composer that opens under each file.
Installation
Overview
Make a shared folder show who added what and what they said, with this collaborative file upload window for React with Base UI. It is the shared folder of Studiohive, a design team, drawn as an app window with a top bar, a roster at the start and the files beside it. The roster is a Toggle Group of everyone in the folder with their upload counts: pick a person to filter the list (a row of chips on a phone). Each file row says "Uploaded by", when and its size, and opens, as a Collapsible, to its comment thread and a composer with a Textarea; a new comment joins the thread and the counts follow. Upload, the Shine Button in the top bar, opens the File Upload picker and lists each picked file by name and size under your name. The window is ruled by Guides. For design teams, review folders and any space where files and talk belong together.
FAQ
How does the roster filter?
Pick a person and the list shows only what they uploaded; Everyone shows all. The counts are worked out from the list, so uploading a file raises yours at once. A person with no uploads shows an empty state in the same box, so the window never changes height.
How do comments work?
Open a file to see its thread, oldest first, and a composer. Comment adds yours under your name with a fixed demo time. An empty comment shows a problem in a reserved line and keeps your place. The count on the row follows the thread.
Does Upload read my files?
No. The picker lists each file by name and size, under You, with no tags and no thread. Files over 200 MB are refused with a short note. Nothing is uploaded and the block never opens a file.
How does it work on a phone?
The roster becomes a row of chips that scrolls sideways above the list, and the comment count on a row drops its word and keeps the number. The window keeps its height; only the list scrolls.
How do I use it from the keyboard?
Tab to the roster and move with the arrow keys; Tab again to the file list, a scroll region that takes focus. A row's comments button opens the thread and names the file and the count. The status line is polite and short, so every action is read out.
What stays local, and how do I wire it?
The members, files, threads and your uploads live in the page. To wire it, load the folder from your API, send the picked files to your upload endpoint in the accept handler, and post comments from the composer. Resolve the author from the signed-in user, not from the page.