shadcn.io is not affiliated with official shadcn/ui
API Deprecation Timeline Changelog Block for React Aria
A 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.
Installation
Overview
An API deprecation timeline for React with React Aria, written for Dusklane, a fictional payments API. A centred header names the day v2 ends. Under it the catalog's Steps, read only, are laid out as four cells that share their hairlines (Announced, Deprecated, Brownout, Sunset), each with its marker, a fixed day, where it stands as of a typed day ("Done", "Now" or "Later") and a line on what happens; reached phases have a check and the current one an outlined marker. Below, a framed table with a caption lists five endpoints: the method as a word and the path, what replaces it with a Copy button, and its calls last week. It's built from Guides, Steps and Copy Button, with CSS transitions for the entrance and your theme's tokens for every colour. For APIs and SDKs that retire a version over weeks. The days and counts are example data.
FAQ
How do I change the phases and the endpoints?
Edit PHASES and ENDPOINTS at the top of the file, and AS_OF. A phase has a day (an ISO date), a title and a note; the current phase is the last whose day has come by AS_OF, so the markers and the Done, Now and Later words are computed. An endpoint has its method, path, replacement and the number of calls.
Is Steps interactive here?
No. It is read only: the phases are a list, not a wizard, so nothing is a button and Tab goes straight on to the table. The cells carry the same facts in text, so a screen reader hears each phase's name, its day and where it stands.
What does the Copy button copy?
The replacement path only ("/v3/payments/:id"), and announces "Copied" politely. Each button has its own name, so a screen reader hears which path it copies.
Is the table a real table?
Yes: a native table with a caption, column headers with scope and the endpoint as the row header, on every base. It sits in a focusable, named region so a keyboard can scroll it sideways on a phone, with the first column held in place.
How does it fit on a phone and in a right-to-left layout?
On a phone the four phases stack, one line each with their notes folded away, and the table scrolls sideways under its sticky first column. In a right-to-left layout the cells and the sticky column mirror, while paths and counts keep their reading order.