shadcn.io is not affiliated with official shadcn/ui
404 With Ranked Results Error Block for Radix UI
A split 404 page for a developer blog host: the failed address in an editable field with its words as chips, and eight typed articles ranked by shared words with one letter of typo allowed, the matched words marked, re-ranking as you edit.
Installation
Overview
Let the address that failed choose the results, with this 404 page for React with Radix UI. It's the not-found page of Postmeadow, a blog host for developers: the page's two side rails run its full height, and one band crosses the screen between two rules, split in two by a divider that meets both rules at a plus mark. At the start sit the display "404", the heading, the failed address in an Input inside a Field, the words read from it as Badge chips, and the Shine Button that opens the closest match, the only colored control. At the end eight typed articles are ranked by a small scorer, with the words they share with the address marked in each title and path. Edit the address and the ranking changes at once; "Reset to the failed address" brings it back. It's built from Field, Input, Badge, Button, Shine Button and Guides, with a CSS entrance only. For blogs, docs and any site whose old addresses nearly match its new ones.
FAQ
How are the articles ranked?
The address and each article's path and title are cut into words (letters and digits, in lower case). A word of the address scores 3 when an article has the same word and 2 when it has one that is a single letter away, as "componets" is from "components"; words under five letters never match loosely, so short words don't pair up by chance. The scores add up, the highest comes first, and equal scores keep the order of ARTICLES. When even the best scores nothing, the Closest match badge goes and the button offers to browse all articles instead.
What do the chips tell me?
Each chip is a word read from the address, up to five, with a mark that says how it meets the closest article: a check when the article has it, an equals sign when it is a letter off, a minus when it is not there. Screen readers hear the same in words, and a count covers any extra words. The marks in the list use a tint and an underline, so nothing relies on color.
What stays in the page, and how do I wire it for real?
Everything. The ranking runs in the browser over ARTICLES, the field is plain state, and nothing is fetched. A row says where it would open in a polite status message instead of navigating, and the main button is a link to #. For a real site, replace rankOf with a call to your search index using the words of the failed address as the query, and point the rows and the button at the articles' real paths.
Does this page return a 404?
The block draws the page; the status comes from your server. Answer with a real 404, even though the page suggests articles, or crawlers will index the dead address as if it worked. Suggesting results never changes that.
How does it fit on a phone?
The two halves stack, with the field, the chips and the button first, so the main button is on the first screen. The list below shows the top four of the eight (it says so), and the divider becomes a rule across the page. The long paths truncate inside their rows.
Is it usable with a keyboard and a screen reader?
The field has a label; Tab runs from it to the main button, Reset and then each article in rank order, and the links show a focus ring inside their rows. After an edit a polite status message names the closest article, or says nothing is close. The rank number and the Closest match badge are read with each row.