404 Page
A centered 404 with a huge numeral, a human message, a home CTA, and a subtle grid backdrop.
- Category
- Templates
- Added
- 2026-09-01
- Deps
- 2
- Updated
- 2026-09-01
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
This page drifted off the map.
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
// ---------------------------------------------------------------
}About this 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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Auth Screens
templatesSign in, sign up and reset as one component — layout and mode switching only, with no submit logic.
Blog Post Page
templatesA long-form article page with real reading progress and a ToC that tracks scroll.
Changelog Page
templatesA changelog with working tag filters and releases that expand in place.