Error38: Missing Piece With Archive Search

A not-found page for a publication, offering a search field as the first action and the month's most read pieces underneath, with a line committing to link permanence.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/error38?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/error38?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/error38.tsx, the badge6 component used for the code marker, and the shadcn/ui input and button primitives behind the search row.

Quick start

The installed file exports error38Demo alongside the block: the exact props behind the preview above. Spread it to get a working not-found page in one line.

import { Error38, error38Demo } from "@/components/beste/block/error38";

export default function NotFound() {
  return <Error38 {...error38Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Error38 } from "@/components/beste/block/error38";

export default function NotFound() {
  return (
    <Error38
      code="404"
      heading="This piece is not at this address"
      description="Links here are meant to last, so this is either a typo or something we moved."
      placeholder="Search for what you were reading"
      submitLabel="Search"
      popularLabel="Most read this month"
      popular={[
        { title: "Writing an estimate you can defend", href: "/essays/estimates" },
        { title: "Saying no in one paragraph", href: "/essays/no" },
      ]}
      note="Nothing published here has ever been deleted."
    />
  );
}

Props

type PopularPiece = {
  title: string;
  href: string;
};

Behavior notes

• Search is the first action rather than a link home, because on a content site the reader usually knows what they were looking for.
• The field is controlled and the submit handler logs the query after calling preventDefault, which is the seam to point at your own search route.
• The status code is carried by Badge6 rather than set as huge display type, so the page leads with the sentence and not the number.
• The magnifier is pointer-events-none with pl-12 on the input, so the icon never takes a click.