shadcn.io is not affiliated with official shadcn/ui
Permission Manager File Upload Block for React Aria
A client portal sharing panel: each file opens to a four-step visibility ladder (Only me, People, Anyone with the link, Public), a plain sentence on what the step means, a role for each person and a link with a copy button.
Installation
Overview
Let people see exactly who can open a file before they change it, with this permission manager for React with React Aria. It is the sharing panel of Gatemoor, a client portal for a design studio. Four files are rows in a framed panel ruled by Guides; a row opens, as a Collapsible, to a Segment Group with the four steps of the ladder (Only me, People, Anyone with the link, Public) and one sentence that says what the chosen step means for that file, worked out from the people and roles as you change them. People lists everyone with access with an Avatar of initials, a role in a Native Select (Viewer, Commenter or Editor) and a Remove button; the link steps show the link with a Copy Button and, for Anyone with the link, a Switch that lets link holders comment. A Badge on each row names the step. It is not a matrix of permissions: that is the access control block. For client portals, shared drives and any product where a file has an audience.
FAQ
What does each step of the ladder mean?
Only me keeps the file private to you. People opens it to the named people on the list, each with a role. Anyone with the link lets whoever holds the link view it (and comment, if you switch that on), and keeps it out of search. Public lists it in search too. The sentence under the ladder says this for the file you are looking at, including how many people can open it and how many can edit.
What happens when I remove someone?
The row stays where it is and says Removed in this demo, with an Undo button, so nothing under it moves and nothing is lost by a slip. The sentence and the count of people can open it drop the person at once. In your app, send the removal to your API and decide whether Undo is still on offer.
Does the panel jump when I change the step?
No. The part that follows the step sits over an unseen copy of the longest one (the people list), so the open row keeps its height whichever step you pick. Only opening or closing a row changes the height, and one row is open at a time.
Is the link real?
No. It is a made-up address on gatemoor.example, and the Copy Button only puts that text on your clipboard. In your app, create a link on the server for each file, show it here and revoke it when the step goes back to People or Only me.
How do I use it from the keyboard?
Tab to a file and press Enter or Space to open it. The ladder is a group of radio-style segments: move with the arrow keys. Each role select is named for its person (Role for Lorcan Halvorsen), Remove and Undo name the person too, and a polite status line reads out every change.
What stays local in the demo, and how do I wire it?
Everything: steps, roles, removals and the comment switch live in the page and nothing is shared or saved. To wire it, replace the typed DOCS list with your files, and call your sharing API from the handlers that change a step, a role, a removal or the comment switch. Enforce the same rules on the server; the panel only shows them.