Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Error blocks

Pro

Deprecated Endpoint Migration Error Block for Vue

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.
Get ProSign in
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 Vue with Ark 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.

All 100 error blocks