shadcn.io is not affiliated with official shadcn/ui
Access Control File Upload Block for Svelte
Document permissions for an agency: four files as tabs over a table of five people by Read, Write and Delete, an inherit-from-folder switch that locks the cells, a count of overrides and a reset.
Installation
Overview
Show what a file inherits and what it overrides, with this access control panel for Svelte with Ark UI. It is the document permissions screen of Lockwell, an agency's client files. A Tabs strip picks one of four files, and under it a native table lists five people by Read, Write and Delete, each cell a Checkbox. A Switch says whether the file inherits its folder's permissions: on, the cells are locked to the folder's and show it; off, you override them, and the cells that differ from the folder are counted ("3 overrides") with an Override Badge on the person. Delete needs Write and Write needs Read, so ticking one ticks the ones under it. Reset to inherited drops the overrides, and Save and Discard act on the changes in the page. On a phone each person is a row of three Toggle chips. The panel is ruled by Guides and the one coloured button is the Shine Button. For agencies, document stores and any product with folder permissions.
FAQ
What does Inherit from folder do?
While it is on, the table shows what the folder grants and the cells are locked: a tick or a dash with the words from folder for a screen reader. Turn it off and the cells become checkboxes that start from your file's own overrides. Overrides are kept while the switch is on, and the count then reads as paused.
How are overrides counted?
A cell counts as an override when the file's own setting differs from the folder's. The number sits next to the switch, and a person whose cells differ gets an Override badge. Reset to inherited puts the folder's cells back, turns inheritance on and says so; when there is nothing to reset it says that instead.
Why did a second box tick by itself?
Delete needs Write, and Write needs Read, so ticking Delete ticks the two under it, and clearing Read clears the two over it. The note under the table says so. If your rules differ, change withCell, which holds the whole rule.
Does each tab keep its own changes?
Yes. Each file has its own switch and cells in one state object, so you can change three files and then Save once. The foot counts the unsaved changes across all of them, Discard puts back the saved state, and every tab has the same five people so the panel keeps its height.
How does it look on a phone?
The table becomes a list with one item per person and three toggle chips named for the permission and the person (Write for Greta Ndlovu). When the file inherits, the chips are locked and the line under the name says From folder.
What stays local, and how do I wire it?
The people, files, folder grants and the saved state are typed at the top of the file, and Save only keeps the draft in the page. To wire it, load the folder's grants and the file's overrides from your API, and send the draft in the save handler. Check the same rules on the server: the browser's table is a view, not the policy.