shadcn.io is not affiliated with official shadcn/ui
API Versioning Matrix Changelog Block for React
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.
Installation
Overview
An API versioning changelog for React with Base UI, written for Graceline, a fictional developer platform. Under a centred headline sits an inset framed table on the page's lines, + marks on its corners: one row for each version (v3, v2, v1, v0) with its status as an outline badge (an icon and a word: Current, Supported, Deprecated, End of life), the day it was released, the day support ends, and a column for each capability (REST, GraphQL, Webhooks, Batch, Streaming) with a check or a minus and the same thing in words for a screen reader. In the frame's foot a toggle group picks a capability: its column is ringed from header to foot and a polite line says which versions have it, counted from the table ("Streaming: v3 only."). On a phone the table scrolls sideways in a focusable region and the version column stays. It's built from Toggle Group, Badge, Guides and a native table, with CSS transitions for the entrance and your theme's tokens for every colour. For developer platforms, deprecation pages and upgrade guides. The versions and dates are example data.
FAQ
How do I change the versions and capabilities?
Edit VERSIONS and CAPABILITIES at the top of the file. A version is an id, a status, an ISO released day, an ends day (empty when none is announced) and the ids of the capabilities it has. The marks, the ringed column and the sentence under the picker are all computed from those lists.
How is status shown without colour?
Each status is an outline badge with an icon and a word (a circled check for Current, a shield for Supported, an archive box for Deprecated, a bar for End of life). No status colour is used, so it reads the same in greyscale and to a screen reader, which hears the word and skips the icon.
What does a screen reader hear in the capability cells?
Each cell holds a check or a minus drawn as an icon and a hidden word, "Supported" or "Not supported", so the table reads as full sentences row by row. The table has a caption, column headers and the version as each row's header.
What does the capability picker do?
It is a single-choice toggle group with one button always pressed. The chosen capability's column gets a ring and a light fill from its header to its last row, and a polite status line gives the answer ("Webhooks: v3, v2 and v1.") built from the same data. It changes no data and sends nothing.
How does it fit on a phone and in a right-to-left layout?
The table keeps a minimum width and scrolls sideways inside a focusable region, so a keyboard can scroll it too, while the version column is sticky and stays in view. In a right-to-left layout the columns mirror and the sticky column sits at the right; dates and version names stay left to right.
Related
- 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
API Changes Changelog
APIs and integrationsA 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.
- Pro
SDK Versions Changelog
APIs and integrationsClient libraries in one tabbed window: a tab per language with its latest version, then that version large, its day, a support state as a shape and a word, the install command in a code region with a Copy button, and a table of the last three versions.
- Pro
Deprecation Notices Changelog
APIs and integrationsFour deprecation notices, each a window bar from the day it was announced to the day it sunsets, filled to an as-of day with a tick, with the days counted and the replacement named.
- Pro
API Usage Metrics Changelog
APIs and integrationsSix weeks of requests as stacked columns by API version, the legend and title reading the latest week's shares from the data, a Requests or Share toggle, and a three-cell band of requests, error rate and p95 latency with their changes.
- Pro
Feature Sunset Changelog
Roadmap and customersFour retiring features as ruled Collapsible rows with a four-square phase meter; each opens to its four phases, who is affected and its replacement, and a toggle group filters by area.