404 Did You Mean

Component 4

About

A left-aligned 404 error page section that strikes through the requested path and points visitors to the closest matching page with a suggestion box and a back-to-home button.

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

Code

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

Usage.tsx

import Error9 from "@/components/ui/error9";

export default function Error9Demo() {
  return (
    <Error9
      code="404"
      heading="That page moved"
      description="We could not match this address, but one page comes close. Old links keep working for six months after a move."
      requestedPath="/docs/install/quick-start"
      suggestionLabel="Did you mean"
      suggestion={{ label: "/docs/getting-started", href: "https://beste.co" }}
      button={{ label: "Back to home", href: "https://beste.co" }}
    />
  );
}