404^page

The page isn't there: why that might be, and two ways on.

Pages

Preview: /preview/not-found
Guidance: draft · v0.1.0

Preview

The real page, full screen, in a frame. Switch width here and mode at the foot of the side nav.

Open full screen

Guidance

Rules

Say plainly that the page isn't there – no jokes in place of help.
Give the likely reasons: a mistyped address, or an old link.
Two ways on: the home page (primary) and someone to ask.
Return a real 404 status – in Next.js, app/not-found.tsx does this.
Keep the product's frame if the person is signed in; this page is the bare version for anyone.

Built from

Code

Copy it into a product and change the words; the layout and tokens carry over.

app/_pages/not-found-view.tsx

import Link from "next/link"
import { ArrowLeft } from "lucide-react"
import { Text } from "@/registry/jsp/text"
import { Button } from "@/registry/ui/button"

/**
 * The 404 page: say plainly that the page isn't there, offer the likely reasons, and give two ways on –
 * home, and someone to ask. Used by the Pages preview and by this style guide's own not-found page.
 */
export function NotFoundView({ homeHref = "/", homeLabel = "Go to the home page" }: { homeHref?: string; homeLabel?: string }) {
  return (
    <main className="flex min-h-dvh flex-1 items-center justify-center p-component-xl">
      <div className="flex w-full max-w-site-xs flex-col items-start gap-layout-sm">
        <Text as="p" textStyle="overline" color="subtle">
          Error 404
        </Text>
        <div className="flex flex-col gap-component-md">
          <Text as="h1" textStyle="heading-1">
            Page not found
          </Text>
          <Text color="subtle">If you typed the address, check the spelling. If you followed a link, it may be out of date.</Text>
        </div>
        <div className="flex flex-wrap gap-component-xs">
          <Button asChild>
            <Link href={homeHref}>
              <ArrowLeft data-icon="inline-start" /> {homeLabel}
            </Link>
          </Button>
          <Button asChild variant="outline">
            <Link href="mailto:hello@example.com">Contact support</Link>
          </Button>
        </div>
      </div>
    </main>
  )
}