404 Search Page

Component 1

About

A 404 error page with a search field for finding content plus a list of suggested pages to help lost visitors navigate back.

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

Code

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

Usage.tsx

import Error2 from "@/components/ui/error2";

const demoData = {
  code: "Error 404",
  heading: "We could not find that page",
  description:
    "Search the site instead, or jump straight to one of the pages people land on most.",
  labels: {
    placeholder: "Search documentation, guides, and posts",
    submit: "Search",
    suggestions: "Suggested pages",
  },
  suggestions: [
    {
      title: "Getting started",
      description: "Install the library and ship your first page",
      href: "https://beste.co",
    },
    {
      title: "Components",
      description: "Every block, grouped by category",
      href: "https://beste.co",
    },
    {
      title: "Pricing",
      description: "Plans, licensing, and what is included",
      href: "https://beste.co",
    },
    {
      title: "Support",
      description: "Get help from a human within one business day",
      href: "https://beste.co",
    },
  ],
};

export default function Error2Demo() {
  return <Error2 {...demoData} />;
}