shadcn.io is not affiliated with official shadcn/ui
Deprecated Endpoint Migration Error Block for React
A page for a retired API endpoint: the old and the new endpoint as two diff lines with the days to go to a typed sunset date, a link to the migration guide, and the same request on the new version in curl, JavaScript and Python tabs with numbered lines, changed lines flagged and a copy button.
Installation
Overview
Tell developers what is retiring, when, and exactly what changes, with this deprecated-endpoint page for React with Base UI. It's the page for the old messages endpoint of Pennywire, a messaging API: the page's two side rails run its full height, and one band crosses the screen between two rules with a plus mark where each meets a rail. Under the product's mark and the heading, a ruled band draws the old and the new endpoint as two diff lines beside the days to go to the sunset date, and the Shine Button leads to the migration guide, the only colored control. Below, Tabs show the same request on the new version in curl, JavaScript and Python, in numbered lines with the changed ones flagged, and a Copy Button copies the one on show. It's built from Tabs, Copy Button, Shine Button and Guides, with a CSS entrance only. For API providers who retire a version and want it to be easy to leave.
FAQ
Where does the date and the count of days come from?
The sunset date and the page's "today" are typed constants at the top of the file (SUNSET and AS_OF), and the days to go are worked out from them, so the server and the browser agree and the number is never typed by hand. Show the same date to machines: send Deprecation and Sunset response headers from the old endpoint, and answer 410 Gone after the day.
Why is there no redirect or countdown?
A redirect would hide a breaking change from the people who need to act on it. This page says what changes and by when, and leaves the move to the reader. It has no timer: the count is a number of days, not a clock.
What do the tabs show, and how do they behave?
The same request written for version 2 in three languages, each line numbered, with a plus mark, a bar and a hidden "Changed:" on the lines that differ from version 1. Arrow keys move between the tabs, and the panel keeps its height whichever tab is open, so the page doesn't move. The code scrolls sideways inside a named region on a narrow screen, which you can reach with the keyboard. Edit the Line lists to match your own change.
Does Copy really copy?
Yes: it writes the visible request to the clipboard through the Copy Button, then shows a check, and a polite status message says which one was copied. If the browser refuses (the page isn't served over HTTPS, or permission is denied), the button shows a cross and nothing is announced as copied.
Related
- Pro
Version Mismatch Ruler Error
MaintenanceA full-height page for a web app tab running a retired version: a ruler of five releases with the supported range shaded and You are here marked, a radio group to read each release, three changes in 5.0 and a reload button.
- Pro
Archived Project Restore Error
Locked and removedA page for an archived project: four cells for when and by whom it was archived, how many people worked on it and how many days it sat quiet, a retention meter with the months that remain, one button to restore it, a real archive download and a link to active projects.
- Pro
Missing API Key Error
Developer toolsA full-screen page for a developer whose API key is missing: the steps to fix it, and a numbered .env window whose empty key line is marked and can be filled with a sample key that shows as a diff.
- Pro
Planned Maintenance Progress Error
MaintenanceA full-height maintenance page for an online bank that shows a five-segment progress bar with the window's start and expected return, and a Check again button that reports a typed result.
- Pro
Failed Build Pipeline Error
Developer toolsA CI build window: five pipeline stages as tabs, each with its own numbered log, the failing line marked, a re-run that only queues, common fixes and the build id with Copy.
- Pro
Invalid Config File Error
Developer toolsA full-screen page for a config file that does not validate: a numbered, editable JSON window parsed as you type, the problems located by line and column, and one button that applies the fixes.