Files
f02488c3c6 fix(docs): add custom 404 page with proper theme support (#5779)
* fix(docs): add custom 404 page with proper theme support

The default Next.js error page renders with a hardcoded black
background and dark color scheme, causing broken styling in light
mode (black background, invisible banner text) and the 404 message
not being centered.

Add a custom not-found.tsx that uses Fumadocs DocsPage component
to properly inherit the active theme, centers the 404 message,
and sets a concise tab title.

Fixes #5778

* fix(docs): move not-found to root and override h1 padding

Place not-found.tsx at the app root so it catches unmatched URLs
across all route groups (e.g. /blog/*, /api/*) — a not-found inside
the (doc) group only catches 404s within that segment.

Add `py-0!` to the heading to defeat the global `h1 { @apply py-3 }`
rule from global.css; `border-none` already neutralizes the bottom
border. Wrap in DocsLayout so the 404 keeps the sidebar/nav chrome.

---------

Co-authored-by: Colin McDonnell <[email protected]>
2026-04-27 19:55:55 -07:00

19 lines
669 B
TypeScript

import { layoutProps } from "@/app/(doc)/layout";
import { DocsLayout } from "fumadocs-ui/layouts/docs";
import { DocsPage } from "fumadocs-ui/page";
export const metadata = { title: "Page not found | Zod" };
export default function NotFound() {
return (
<DocsLayout {...layoutProps} containerProps={{}}>
<DocsPage>
<div className="flex flex-col items-center justify-center min-h-[60vh] text-center">
<h1 className="text-6xl font-bold text-fd-foreground border-none py-0!">404</h1>
<p className="mt-4 text-lg text-fd-muted-foreground">This page could not be found.</p>
</div>
</DocsPage>
</DocsLayout>
);
}