Centered 404 Message

Navigation 7

About

A minimal centered 404 not-found page with a large error code, heading, short explanation, call-to-action buttons, and a row of popular page links.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Centered 404 Message to your project and fits it to your theme.

Code

How Centered 404 Message is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Error1 from "@/components/ui/error1";
import { House } from "lucide-react";

export default function Error1Demo() {
  return (
    <Error1
      code="404"
      heading="This page could not be found"
      description="The page you are looking for was moved, renamed, or never existed. Check the address, or pick one of the pages below."
      buttons={[
        { label: "Back to home", href: "#", icon: House },
        { label: "Contact support", href: "#", variant: "outline" },
      ]}
      linksLabel="Popular pages"
      links={[
        { label: "Documentation", href: "#" },
        { label: "Pricing", href: "#" },
        { label: "Blog", href: "#" },
        { label: "Changelog", href: "#" },
      ]}
    />
  );
}