shadcn.io is not affiliated with official shadcn/ui
Permissions Setup Onboarding Block for Radix UI
A roles panel for a document hub: three roles in a single-open accordion with six permission checkboxes each, and a drawn sidebar that marks every menu item Shown or Hidden as you tick.
Installation
Overview
Let new admins decide who can do what, with this roles step for React with Radix UI. It is a setup panel of Stewardby, a team document hub: a compact header over one framed panel in two cells. The first is an Accordion that keeps exactly one of three roles (Admin, Editor and Viewer) open, each row showing its member count and "4 of 6"; the open role lists six permissions as Checkboxes, each with a line saying what it allows. The second is a drawn sidebar, "What Editors see", whose rows say Shown or Hidden as you tick, so a permission is read as the menu it opens: Billing appears only when "Access billing" is ticked. Admins always keep "Manage members", and the refusal says so. The one Shine Button is Save roles, with Discard beside it.
FAQ
How does the sidebar follow my ticks?
It is a list of seven rows drawn from the open role's permissions: Home is always shown, and each of the six permissions opens one named item (Documents, Inbox, Drafts, Shared links, Members, Billing). A row is Shown or Hidden by its word, a check or a dash, and its weight, never by colour. The rows never leave the page, so the panel does not change height when you tick.
Why can't I clear Manage members on Admin?
A workspace must always have someone who can manage people, so the box refuses in words ("Admins always manage members.") and stays ticked. Every other box can be cleared on every role. Change tick if your product has different rules, for example a Viewer who can never edit.
What do Save roles and Discard do?
The foot counts the boxes that differ from the saved roles ("3 changes not saved yet."). Save roles and Discard are always there; with nothing to save they stay pressable and answer "No changes to save." instead of going quiet. Discard puts the last saved roles back.
What stays local in the demo, and how do I wire it?
Everything: Save roles only updates the panel's own state and says "Saved in this demo." Nothing is sent, and the member counts are typed. In your app send grants from save, load the saved roles into START, and take the counts from your members list.
Can I use it from the keyboard?
Yes. Tab reaches each role's row, Enter or Space opens it, and then Tab goes through its six checkboxes, which Space ticks. The arrow keys also move between the role rows, and Home and End jump to the first and last. On this version the open role is marked unavailable to press, since a single accordion that cannot close has nothing to do there; the other roles are unaffected.