Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Access Control Changes Changelog Block for React Aria

A 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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An access-control changelog for React with React Aria, written for Roleward, a fictional workspace-permissions product. A start-aligned header carries a Release Select (v3.4.0, v3.3.0, v3.2.0) at its end. Under it, an inset frame whose lines run a little past its corners holds one table: a row for each of six permissions, with its name and its scope in mono, and a column for each role (Viewer, Editor, Admin). Every cell shows what the chosen release did: a plus and the word Granted in bold, a minus and the word Revoked struck out, or a quiet dot for no change. A polite line counts the grants and revocations from the data, and a legend closes the frame. It's built from Select, Guides and a native table, with CSS transitions for the entrance. The releases and permissions are example data, and nothing here changes a real permission.

FAQ

How do I change the releases and permissions?

Edit PERMISSIONS (a name and a scope each) and RELEASES at the top of the file. A release has a label, a fixed ISO date and cells: one row per permission, in the same order, each with one change per role (GRANTED, REVOKED or SAME). The counts in the status line come from those cells.

How are granted and revoked told apart?

By a sign and a word, never by colour. A granted cell is an ins element in bold with a plus; a revoked one is a del element, struck through, with a minus. A cell with no change shows a dot and a visually hidden No change, so a screen reader hears every cell.

Does the table move when I pick another release?

No. Every release fills the same rows and columns, each row has a fixed height, and the status line reserves its space, so the frame keeps its size whichever release is chosen. The caption and the status line name the release for assistive technology.

What happens on a phone and in a right-to-left layout?

The table scrolls sideways in its own focusable region and the permission column stays in place. In a right-to-left layout the table and the Select mirror; scopes keep their left-to-right direction and the release and date read as one phrase.

What moves, and what is real?

The header and frame fade up once on load, with CSS transitions that reduced motion turns off. Choosing a release swaps the cells at once. Nothing is saved or sent: the Select only picks which example release to show.

All 200 changelog blocks