Echoing Numerals 404 Error Block for React

Only if your theme is. The slug keeps shadcn.io's URL, but nothing here forces a dark background: every surface is a theme token, so it reads the same in light, dark and any preset. The numerals fade through a CSS mask, which works on any background.

It's five 404 spans stacked with a tight line height inside one box with a mask-image gradient that goes from transparent at the top to opaque near the bottom. The box is hidden from assistive technology: the heading says "This page has gone quiet" and the sentence says "Error 404" in words. Edit ECHO to change the number of rows; the first two have max-sm:hidden, which is why a phone shows three.

A page can't know where the visitor came from, and a script that calls the browser's history back can leave a person on another site or on nothing at all. Point "Go back" at the section a lost visitor most likely wanted, or at your home page, and keep browser back for the browser's own button. In this demo all four links go to #.

Each cell is one a that fills its grid cell, so the whole cell is the target, with a solid tint on hover and an inset focus ring so it isn't clipped. The cells sit on shared hairlines: the grid has a gap of one pixel over a border-colored background, and the frame's four plus marks come from Guides. Below the sm breakpoint they stack, each its own full-width row.

Everything here is local: the page has no state, and its four links go to # until you point them at real routes. It can't set the 404 status either, since a block never sees the request: render it from your framework's not-found route so your server answers with a 404, not a 200 that says "not found". It needs no client code.

The three-row echo fits above the heading, the link home is on the first screen, and the three cells stack under it. The numerals use the same sizes as the other 404 blocks, large but not display-huge, so the heading never starts below the first screen.