shadcn.io is not affiliated with official shadcn/ui
API Versioning Matrix Changelog Block for Vue
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 Vue with Ark 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.