Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Access Control Changes Changelog Block for React

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 Base UI, 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.

  • Pro

    Permission Changes Changelog

    Security and audits

    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.

  • Pro

    API Versioning Matrix Changelog

    APIs and integrations

    A framed table of API versions with a status badge (Current, Supported, Deprecated, End of life), release and support-end days and a check or minus per capability, with a toggle group that rings one capability's column and says which versions have it.

  • Pro

    Cell Grid Security Updates Changelog

    Security and audits

    Three security advisories in cells on shared hairlines, each with its severity as an icon and a word, id, plain-language summary, affected and fixed versions as inline code and an upgrade command with a working Copy button.

  • Pro

    Enterprise Updates Changelog

    Spotlights and media

    Six 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

    Customer Impact Changelog

    Roadmap and customers

    Three customer-facing issues as tabs; each panel shows the issue's reach on four plan tiers as text and a bar, how it ended, and a total counted from the data.

  • Pro

    Breaking Changes Changelog

    APIs and integrations

    A framed table of four breaking calls: the old call in a del row, the new in an ins row, who it affects and the day to migrate by, with a codemod command in a terminal strip and a Copy button.

All 200 changelog blocks