404 Page
A centered 404 with a huge numeral, a human message, a home CTA, and a subtle grid backdrop.
DOM + CSS1 dep1 file · 1 KB TSX
Props
// Full, shippable page — real size at normal type scale. This is the
// App Router convention: drop this file in as app/not-found.tsx and
// Next.js renders it automatically for any unmatched route. The registry
// preview above is a scaled-down miniature of this same composition.
import { Home } from "lucide-react";
export default function NotFoundPage({
brandName = "Nova",
message = "This page drifted off the map.",
showHomeButton = true,
}: {
brandName?: string;
message?: string;
showHomeButton?: boolean;
}) {
return (
<main className="relative isolate flex min-h-full flex-col items-center justify-center gap-4 overflow-hidden bg-neutral-950 px-6 text-center text-neutral-100">
<div
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this page template
A 404 page gets one job, done under three seconds of attention: tell the visitor they're not lost forever and hand them a way back. Everything here is subordinate to that — no nav, no footer, nothing competing with the numeral and the single CTA. The message prop is deliberately plain-language rather than technical ('drifted off the map,' not 'route not found'), because a 404 is one of the few pages a visitor never intended to land on, and jargon at that moment reads as the site blaming them for the broken link. The faint background grid is the non-obvious detail — at 6% opacity it does almost nothing consciously, but it keeps the mostly-empty page from feeling unfinished rather than designed, the same trick used in the app's own preview canvas. Caveat: this composition assumes a single clear 'go home' action; a larger site with meaningfully different sections (docs vs. marketing vs. app) may want a small set of destination links instead of one generic CTA.
