shadcn.io is not affiliated with official shadcn/ui
Permission Matrix CRUD Block for Ark UI
A native table of roles by permissions whose checkboxes save at once, with roles you can add by copying another, rename in the column head and delete only when nobody holds them.
Installation
Overview
Let an admin shape what each role can do with this permission matrix for React with Ark UI. A hairline frame with a plus mark on each corner holds a quick line, a native table and a foot. Six permissions run down the side in a pinned first column and five roles run across, with a native checkbox in every cell, a real table with row and column headers. A tick saves at once and says it: "Approve refunds is now off for Billing", with an Undo for the last change. Add role, the one Shine Button, copies the permissions of the role chosen in a "Copy from" Native Select. A role's name is an Editable in its column head, which also says "3 people hold this role". A role people hold can't be deleted, an empty one deletes with an Undo, and the last role that holds Manage members can't lose it, by a tick or by deletion; a lock marks that cell. On a phone the table scrolls sideways under its pinned column, with a fade at the edge. For access consoles, admin panels and billing settings.
FAQ
How do I fill it with my roles and permissions?
Edit PERMISSIONS for the rows and START for the roles and their grants. A grant is the text "roleId|permissionId" for each ticked cell, so the table, the counts and the copy all read one list. A role also has a people count, which decides whether it can be deleted.
What does Copy from do?
It gives the new role the same ticked cells as the role you chose, with no people, so you start from a near match instead of an empty column. Choose No permissions to start empty. The new column appears at the end of the table and focus lands on its rename pencil, so you can name it at once.
Which changes are refused?
Unticking Manage members for the only role that has it, and deleting that role, are refused with a line naming the role. Deleting a role that people hold is refused with "N people hold this role". A role name can't be empty, over 20 characters or the same as another's. The refusal is in the polite line, and nothing changes.
What does Undo reverse?
The last change to the sheet: a tick, an added role, a rename or a deleted role. It puts the whole sheet back as it was and clears itself; a new change replaces it, and nothing times out.
What stays local, and how do I wire it to a real API?
The sheet is React state in this tab and a reload brings back the five roles. In your app save each tick in tick, send the copy in add, and check the last-manager rule on the server too. The table is plain HTML, so it renders the same on all seven targets.
How do I use it with a keyboard?
Every cell is a native checkbox, so Tab reaches it and Space toggles it, and its name is the permission and the role ("Export data for Auditor"). The heads hold the name field and a Delete button. The scroll area is focusable, so the sideways scroll works from the keyboard.