shadcn.io is not affiliated with official shadcn/ui
API Changes Changelog Block for React Aria
A band of ruled rows listing changed API endpoints, each with its method, path, one line on what changed, a kind (Added, Changed, Removed) and its version, filtered by HTTP method with a toggle group that sums up what is showing.
Installation
Overview
An API changelog for React with React Aria, written for Routeledger, a fictional API-docs tool, about its own API. A start-aligned header carries the title, one sentence and a toggle group (All, GET, POST, PUT, DELETE) with a polite line under it that sums up what is showing, counted from the rows: "9 changes: 4 added, 3 changed, 2 removed". Under it, one band of ruled rows runs rail to rail. Each row has the method (a mono word and an icon), the path in a code element, one line on what changed, the kind of change as a glyph and a word (+ Added, ~ Changed, - Removed) and the version that shipped it. Choosing a method filters the rows; an unseen copy of every row sits in the same grid cell, so the block never changes height. On a phone the path wraps under the method and the description under the path. It's built from Guides and Toggle Group, with CSS transitions for the entrance and your theme's tokens for every colour. For API changelogs, developer hubs and release notes that want one scannable list. The endpoints and versions are example data.
FAQ
How do I change the endpoints?
Edit CHANGES at the top of the file, newest version first. A change is an id, a method, a path, a kind (ADDED, CHANGED or REMOVED), a one-line note and a version. The summary line is counted from the rows showing, so adding a row updates it, and the filter buttons come from METHODS.
How are the kinds and methods told apart without colour?
Each kind is a glyph in a small box and a word (+ Added, ~ Changed, - Removed) and each method is a mono word with an icon, so the list reads in greyscale and to a screen reader, which hears the words and skips the glyphs. No status colour is used.
What does the filter do, and what is announced?
It shows only the rows for the chosen method; All shows every row. A polite status line gives the new summary after each choice ("3 changes: 2 added, 1 changed"). Arrow keys move between the buttons and one button is always pressed.
Why doesn't the block jump when I filter?
An unseen copy of the full list sits in the same grid cell as the visible one, so the band is always as tall as the unfiltered list; fewer rows simply leave empty space under them.
How does it fit on a phone and in a right-to-left layout?
Below sm each row becomes three lines: method, kind and version first, then the path (which breaks anywhere so a long path never scrolls the page), then the description. In a right-to-left layout the rows mirror, while the paths and versions stay left to right.