shadcn.io is not affiliated with official shadcn/ui
Minimal 404 Error Block for Solid
A full-height 404 page for a notes app with only the display numerals, a heading, one sentence that names the missing address as typed text, and one link back to the docs.
Installation
Overview
Give a missing page the quietest possible answer, with this minimal 404 block for Solid with Ark UI. It's the not-found page of Lumenpad, a notes app: 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. In the band sit the numerals 404 in large display type, the heading "Page not found", one sentence that says the error code in words and names the missing address as typed text, and one Shine Button link back to the docs, the only colored control. There is no picture, no card and no second button: the restraint is the point. The words fade up once on load with CSS and nothing moves with reduced motion. It's built from the Shine Button and Guides. For any site's 404 page, error boundary or "this page has moved" screen.
FAQ
Does this page set the 404 status?
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.
What does the link do, and how do I wire it?
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.
How do I show the real missing address?
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.
Why are the big 404 numerals hidden from screen readers?
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.
Why only one button?
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.
How does it look on a phone?
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.