shadcn.io is not affiliated with official shadcn/ui
Third-Party Integrations Changelog Block for Vue
An API-version compatibility table that ends the block: a button group picks the API version you run, and each connector shows Works, Needs update or Retired on it and on the latest version.
Installation
Overview
A compatibility changelog for Vue with Ark UI, written for Bridgeport, a fictional integration platform. A compact header carries the title, one sentence and, at its end, a group of three buttons for the API version you run today (v2.0, v2.1 or v2.2). Under a band rule, a status line counts what needs action ("2 need action before Nov 30"), and the table runs from rail to rail and ends the block. Each row is a connector, with a neutral two-letter plate and its name; the first column says how it works on the version you picked and the second how it will on the latest, v3.0, separated by a hairline. A cell is an outline badge with an icon and a word: Works, Needs update or Retired. Choosing a version redraws the first column and the count and moves nothing. On a phone the table scrolls sideways in a labelled region with the connector pinned at the start. It's built from Guides, Badge, Status and Toggle Group, with CSS transitions for the entrance and your theme's tokens for every colour. For integration platforms and API providers who retire a version and need customers to see what breaks. The compatibility is example data, not a claim about any service.
FAQ
How do I change the connectors and versions?
Edit API_VERSIONS (the versions a customer may run), LATEST and CONNECTORS at the top of the file. A connector has a mark, a name, latest (its fit on the latest API) and mine, a list with its fit on each API version in the same order as API_VERSIONS. A fit is Works, Needs update or Retired. The count in the status line is worked out from the rows for the version picked, so it stays true when you edit. The deadline is a typed ISO date, not computed from today.
How does picking an API version work?
The three buttons are a single-choice toggle group that always keeps one pressed, so the table never has no version. Pressing one redraws the first column and the status line, which is a polite live region, so a screen reader hears the new count. The arrow keys move between the buttons, and every row, badge and heading keeps its place, because only the words inside the cells change.
How are the states told apart without colour?
Each cell is an outline badge with an icon and the word: a tick for Works, circular arrows for Needs update and a barred circle for Retired. The icons are decoration, so a screen reader hears the word. The one amber dot in the status line is a hint only; the count beside it carries the meaning.
Where do the service logos go?
The plate is a plain tile with two typed letters, marked as decoration, and the service is named in text beside it. Replace its contents with a logo you have the right to use if you want one. The block draws no brand's mark and uses no brand colours.
How does the table fit on a phone?
Below md the table scrolls sideways inside a region that has a name and a focus ring, so a keyboard can scroll it. The connector column is pinned at the start with a hairline at its end, so every row keeps its name while you scroll. Nothing else on the page moves sideways at 320 pixels.