shadcn.io is not affiliated with official shadcn/ui
API Deprecation Timeline Changelog Block for React
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 Base UI, 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.
Related
- 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
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.
- $Pro
Breaking Changes Changelog
APIs and integrationsA framed table of four breaking calls: the old call in a del row, the new in an ins row, who it affects and the day to migrate by, with a codemod command in a terminal strip and a Copy button.
- 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
API Versioning Matrix Changelog
APIs and integrationsA 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.
- Pro
Migration Guide Changelog
APIs and integrationsA split: a deadline tag and a running progress count at the start, four migration steps at the end, each with a Done checkbox and a copyable config snippet in a collapsible.