shadcn.io is not affiliated with official shadcn/ui
API Changes Changelog Block for React
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 Base UI, 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.
Related
- Pro
API Endpoint Changelog
APIs and integrationsOne new endpoint spotlighted in a split: its method, path and version, a table of the new request fields, and a tabbed window with the request, the response and the error codes in focusable code regions with Copy buttons.
- Pro
API Versioning Matrix Changelog
APIs and integrationsA 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
API Deprecation Timeline Changelog
APIs and integrationsA v2 API retired in four phases as read-only Steps in cells that share their hairlines, then a framed table of the five deprecated endpoints with a Copy button on each replacement.
- Pro
Tabbed Rate Limit Changes Changelog
APIs and integrationsA tabbed window of rate-limit changes by plan: one tab per plan, a table of endpoints with the old limit struck through, the new one in bold, the change as an arrow, a word and a percentage, and a pair of bars.
- 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
Breaking Changes Changelog
APIs and integrationsA 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.