shadcn.io is not affiliated with official shadcn/ui
404 With Address Guesses Error Block for Ark UI
A 404 page for a shipping dashboard that offers three guesses as radio rows, each showing its address with the changed part struck through or underlined and named in a word, and one button that opens the chosen guess.
Installation
Overview
Show where a missing page probably went, and how its address changed, with this 404 page for React with Ark UI. It's the not-found page of Parcelgate, a shipping dashboard: 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 display "404" and the heading, three ruled rows are native radio buttons, each with the reason for the guess, a Badge naming the change (Moved, Up one level, Archived) and the address it leads to, with the part that went struck through and the part that is new underlined. Choosing a row changes the one Shine Button under the rows, the only colored control, to open that address. It's built from Badge, Shine Button and Guides, with a CSS entrance only. For apps whose pages move between sections, or are archived with their old addresses.
FAQ
How is the difference between addresses shown?
Each guess is typed as parts of its address, each a kept part, a part that went or a part that is new. A part that went is struck through, a new part is underlined, and the badge names the whole change in a word, so none of it depends on color. Screen readers hear "Gone:" and "New:" before those parts, and a sentence after the row says what changed.
Are the rows real radio buttons?
Yes: native radio inputs inside a radio group, the same on every target. Tab lands on the group once, the arrow keys move between the guesses and choose as they go, and the first guess is chosen to begin with. The whole row is the label, so clicking anywhere on it chooses it, and the chosen row gets a tint and a filled dot.
What does the button do?
It is a link whose words follow the choice ("Open" and the address in monospace), and a polite status message says the button now opens that address. In this demo it points at # and goes nowhere. Point its href at the chosen guess's address, which addressOf builds from the parts.
Where do the guesses come from?
From the typed Guess objects at the top of the file: a reason, a word for the change, the parts of the address and a sentence for screen readers. In your app build them from your redirect rules, a search of old addresses or the segments of the failed path: drop the last part, drop a section that moved, or swap it for the archive.