shadcn.io is not affiliated with official shadcn/ui
Permission Changes Changelog Block for Radix UI
An audit of permission changes as diffs in an inset frame: each role with who changed it and when, inserted and struck-out permission rows with a sign and a word, how many people it reaches, and a toggle group that keeps only granted or revoked rows.
Installation
Overview
A permission-changes audit for React with Radix UI, written for Grantby, a fictional access-management tool. The header counts the changes from the data ("Grantby changed 7 permissions across 3 roles"). A toggle group (All, Granted, Revoked, each with its count) sits above an inset frame whose lines run a little past its corners. Each role in the frame is one entry: the role as a title with a badge for its kind, who changed it (initials in an avatar) and when, and the permissions as rows of a diff in mono. A granted permission is an inserted line with a plus in the gutter and in bold; a revoked one a deleted line, struck through, with a true minus. At the end of each entry, how many people hold the role. Pressing a filter keeps only the matching rows and the roles that have any. It's built from Guides, Toggle Group, Avatar and Badge. The changes and the people are example data.
FAQ
How do I change the entries?
Edit CHANGES at the top of the file. An entry is a role, its kind, who changed it (name, initials), a date as an ISO day and a clock time in UTC, how many users hold the role and its lines: each a scope in mono, a plain-language note and a granted flag. The headline, the filter counts, the status line and the rows are computed from that list.
How is a granted or a revoked permission told apart?
By a sign and a word, never by colour. A granted permission is an ins element in bold with a plus in the gutter; a revoked one is a del element, struck through, with a true minus. Each row also starts with a visually hidden "Granted:" or "Revoked:", so a screen reader hears the change, not the symbol.
Does the frame jump when I filter?
No. An unseen copy of every entry sits in the same grid cell as the visible list, so the frame keeps the height of the full audit whichever filter is pressed. A polite status line reads how many changes and roles are showing, and pressing the chosen item again does nothing.
What changes on a phone and in a right-to-left layout?
Below sm the notes and the people count are dropped, so each entry keeps the role, the person and the diff without scrolling sideways at 320 pixels. Permission names and times keep their own left-to-right direction in a right-to-left layout while the rest of the entry mirrors.
What moves, and what happens with reduced motion?
The header and the frame fade up once on load, with CSS transitions; with reduced motion they are off and the block simply appears. Changing the filter swaps the rows at once. Nothing here is real: the toggle only filters the example data, and no permission is changed.
Related
- Security Patch Tracker ChangelogSecurity and audits
- Cell Grid Security Updates ChangelogSecurity and audits
- Vulnerability Disclosure ChangelogSecurity and audits
- Tabbed Rate Limit Changes ChangelogAPIs and integrations
- Customer Impact ChangelogRoadmap and customers
- $Breaking Changes ChangelogAPIs and integrations