Minimal 404 Error Block for React

No, a block can't: the status is sent by your server. Render this page from your framework's not-found route, such as the not-found file in the Next.js app router, so the response is a real 404. A page that says "not found" but answers 200 is a soft 404: search engines may keep indexing the address, and the copy becomes a lie to crawlers.

Nothing in this demo: it's a link to #. Replace href with your docs route; in a router, wrap its a the way your router's link component asks, or pass the component to the button as the element it renders. Everything else on the page is static text, so it has no state and needs no client code.

MISSING is a typed constant. In your app pass in the path your framework gives the not-found page, for example from its pathname hook or the request on the server, and render it in the same code element. Keep the dir="ltr" on it so an address never reads backwards in a right-to-left page, and keep it a single unbroken run: a long path may need wrap-anywhere instead.

They're display text, drawn large for the eye. The heading says "Page not found" and the sentence begins "Error 404", so a screen reader gets the code once, in words, instead of hearing "four hundred four" before the heading. The heading is the page's only h1.

A 404 has one job: get the visitor back to something that exists. One colored link says where to go first, and it comes first in the tab order. If you want a second way out, such as search or support, add it as an outline button or a plain link beside it, not a second colored one; the blocks for those pages are listed under related.

The numerals stay large, the heading wraps naturally and the button goes full width, so the way back is on the first screen. The page is at least the screen's height (min-h-svh, which doesn't jump when a phone's toolbars hide) and centers the band with more room below than above. It follows your theme in light and dark.