shadcn.io is not affiliated with official shadcn/ui
API Version Account Block for React
The API version an account is pinned to beside the latest, the changes between them grouped as Breaking, Changed and Added, a test-mode switch for 7 days and a scheduled upgrade with a confirm and a cancel.
Installation
Overview
Let people move to a new API version on their own day, with this version panel for React with Base UI. A hairline frame with a plus mark on each corner opens with two cells: the version your requests are pinned to (2025-11-04) and the latest (2026-06-01) with how many days apart they are. Under them the changes between the two sit in three Collapsibles, Breaking (2), Changed (3) and Added (4), each change with a title, a sentence and the field or endpoint it touches in mono; Breaking opens first. A Switch turns on test mode for 7 days and a line shows the exact header it then sends (Stoatbarrow-Version: 2026-06-01) while live requests keep the old one. The foot holds a Native Select of days and the Shine Button "Upgrade on 21 Oct", which asks in an Alert Dialog; the result is "Scheduled in this demo" and Cancel upgrade takes it back. It's built from Collapsible, Switch, Native Select, Alert Dialog, Badge, Button, Shine Button and Guides, with a CSS entrance only. For the developer settings of any versioned API.
FAQ
How do I fill it with my versions and changes?
Edit PINNED and LATEST (ISO days) and GROUPS. Each group has a label, a one-sentence line and its changes: a title, a note and the code it touches. The count in the header of the list and the "209 days behind" line are worked out from the data and the dates. The days in the select are OFFSETS counted from the one AS_OF constant, never the clock, and the upgrade always starts at UPGRADE_HOUR UTC.
What stays local, and how do I make it real?
Everything. Scheduling and cancelling change this page's state and the foot says "Scheduled in this demo" or "Upgrade cancelled"; no version changes. To make it real, send the chosen date to your server in schedule, show it as scheduled only when it answers, and send the new Version header from the date on. Test mode needs your server to read the same header on test keys.
What does the test switch do?
It does not change anything for live traffic. With it on, the line below says "Test-mode requests send Stoatbarrow-Version: 2026-06-01 until 21 Oct. Live requests keep 2025-11-04." and the header shown in mono follows; off, test mode sends the pinned version like live. The end day is seven days from the as-of day. The line reserves its space, so the panel does not move when it changes.
How does the upgrade confirm work?
The Shine Button opens an alert dialog that says which version, which day and hour, and how many breaking changes apply; focus starts on Cancel and Escape closes it. Confirming schedules the upgrade: the button reads "Scheduled for 21 Oct" and is marked unavailable, the select is disabled, and Cancel upgrade becomes usable. Pressing the scheduled button explains why nothing happens and says how to pick another day.
How does it look on a phone?
The two version cells stack, the groups stay full-width rows that open in place, and the foot is pinned to the bottom of the screen with the select above the buttons so the result of an upgrade is always in view. From the medium breakpoint the foot is simply the last band.
Is it accessible?
Each group is a button that reports whether it is open and controls its list; closed lists are not focusable. The switch is named "Test the new version for 7 days", the select "Upgrade day", the status line is a polite live region present from the start, and the dates keep their order in a right-to-left page.