shadcn.io is not affiliated with official shadcn/ui
Role Change Permissions Success Block for React
A role change confirmation inside an app panel: the role before and after, who changed it and when, how many permissions were gained and lost, and a table of eight capabilities with the new ones marked.
Installation
Overview
Show what a new role actually changes with this confirmation panel for React with Base UI. It's the panel Tendrilwork, a project hub, shows after a workspace owner moves someone from Member to Admin: a header with one action, the Shine Button that opens the dashboard, over one framed card ruled by Guides. Its first band is four cells on shared hairlines: the role before and after, who changed it, when, and what it amounts to ("4 gained, 0 lost"). The second is a Table of eight capabilities with a Member column (before) and an Admin column (now), each cell a check or a "not included", and an outline Badge marking the ones that are new. On a phone the Member column goes and the New mark carries the change. For roles, permissions, access reviews and any page that confirms a change of privilege.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was changed: the roles are typed sample data. Edit CAPABILITIES (each has whether Member could and whether Admin can) and CHANGE (who, when, from and to). To wire it, build the rows from your role definitions for the old role and the new one, and set the facts from the audit entry for the change.
Where do gained and lost come from?
They are counted from the rows: gained is a capability Admin has and Member lacked, lost is the reverse, and the strip's "4 gained, 0 lost" and the "4 new of 8" over the table both read the same list. A row is marked New only when it counts as gained, so changing a row in the data changes the count and the badge together.
Is a state only a color?
No. A capability is a check and the word "Included", or a bar and "Not included", in the same weight in light and dark. On a phone the words are visually hidden to save room but still read out, and the column headings say which role each column is.
How is the table built?
It's a native table on every base, with a caption for assistive technology, column headings and each capability's name as a row heading, so it reads the same everywhere.
Related
- Pro
Permissions Account
Shared accessA read-only matrix of what each role may do: permissions in four folding groups against four roles with counts, your own role framed and marked You, and a Request button on what it lacks.
- Pro
A role change from Viewer to Editor with who made it and when, the change as a You can now and a You can no longer cell with plus and minus marks and words, two tabs of facts and abilities at one height, and a local acknowledgement with Undo.
- Pro
Team Roles Dialog
Share and inviteA members page with its roles dialog shown open: seven members with a select-all that shows all, none or a dash, a role select with a line about each role, a Can and Cannot list that changes with it, and a guard that refuses to leave the workspace without an Owner.
- Pro
Invite Accepted Roster Success
People and approvalsA confirmation page for a teammate joining: who invited them and when, how many seats are used, and a roster where the new member's row is marked Joined and holds a role select that changes the role sentence below.
- Pro
Two-Factor Recovery Codes Success
Security and accessA two-step sign-in confirmation page: what was turned on, eight single-use recovery codes in a framed sheet with copy and download, and a Finish setup button that stays dimmed until you tick that you saved them.
- Pro
API Key Show Once Success
Security and accessA key confirmation inside an app panel: the secret masked with an eye toggle and a real copy button, a checkbox that turns it into its stored form, the key's scopes and dates, a request that uses it, and a Done button that waits for the box.