Skip to content
shadcn.io

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

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.

Are the host and the key real?

No. The host is a sample (api.pennywire.example) and the snippets read the key from the environment (PENNYWIRE_KEY) instead of showing one, which is the habit worth teaching. Put your real host in, and never put a real key in a page.

How does it fit on a phone?

The diff lines and the days to go sit side by side from about 380 pixels wide and stack below that. The migration guide button comes before the tabs, so it is on the first screen, and the code panel scrolls sideways in its own region instead of widening the page.

  • Pro

    A 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

    A 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 tools

    A 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

    A 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

    A 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

    A 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.