shadcn.io is not affiliated with official shadcn/ui
Internal Tools Changelog Block for React
An internal admin console changelog filtered by team: a toggle group of All staff, Support and Finance keeps the changes that apply, each row with a Staff only lock badge and a chip for the role it requires.
Installation
Overview
An internal tools changelog for React with Base UI, written for Staffdoor, a fictional admin console. A start-aligned header carries a toggle group at its end (All staff, Support, Finance, each with a count) that keeps only the changes that reach that team. One typed list of changes, each tagged with the teams it applies to, feeds the toggle, the counts and the rows. The rows sit in one inset frame whose lines run a little past its corners: the version, the day and the kind of change at the start, the title and a sentence in the middle, and at the end a lock badge that says Staff only with a chip naming the role the change requires. A polite line says how many changes are showing, and an unseen copy of the whole list holds the frame's height. On a phone the chips wrap under the text. It's built from Guides, Badge and Toggle Group, with CSS transitions for the entrance and your theme's tokens for every colour. For admin consoles, back-office tools and any product with changes only some staff can use. The changes are example data.
FAQ
How do I change the changes and the teams?
Edit CHANGES and TEAMS at the top of the file. A change has a version, an ISO date, a kind, a title, a summary, a requires role and its audiences, the team ids it reaches (a change for everyone lists every team). The counts in the toggle, the "Showing 4 of 6" line and the rows are all worked out from that one list.
Does the filter move the page?
No. The frame holds an unseen copy of the full list in the same grid cell as the shown one, so it keeps its height whichever team you pick, and the rows below never jump. A polite line says how many changes are showing, and the arrow keys move between the three options.
Is the Staff only badge real access control?
No: it is a label. The block only draws who a change is for. Real permissions belong on your server; the badge and the role chip say so in the changelog.
How are the kinds of change told apart without colour?
Each kind is an outline badge with an icon and the word (New, Improved, Fixed, Security), so it reads in greyscale, in any theme and to a screen reader, which hears the word and skips the icon.
Related
- Pro
Permission Changes Changelog
Security and auditsAn 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.
- Pro
Access Control Changes Changelog
Security and auditsA permission diff matrix in an inset frame: a row for each permission, a column for each role, each cell showing what a release granted or revoked, with a release Select at the header's end.
- Pro
Enterprise Updates Changelog
Spotlights and mediaSix enterprise capabilities as a three-by-two grid of cells with overshoot, each with an icon plate, a lock badge and the release it shipped in, and a closing band with a Talk to sales Shine Button.
- Pro
Audit Trail Changelog
Security and auditsA tamper-evident audit trail: six events in a framed table, each with the hash of the event before it and its own, and a Verify chain Shine Button that recomputes every hash in the browser.
- Pro
Filterable Changelog
Filters and browsingThe plainest filtered release list: one row of choices with counts (All, New, Improved, Fixed, Security) over nine releases, a live count of what is showing, and a height that never changes.
- Pro
Category Sections Changelog
Filters and browsingA changelog for a file organiser grouped under Added, Improved and Fixed headings, with a sticky index of the three sections beside them and every change tagged with the release it shipped in.