Search Led 404

Error30: Search Led 404

A monochrome 404 that hands the visitor a search field instead of an apology: a rounded search bar with a circular submit seal sits under the headline, followed by a ruled list of the routes people actually take.

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/error30?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/error30.tsx, plus the badge7 design-system primitive it renders the parenthetical eyebrows through.

Quick start

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

import { Error30, error30Demo } from "@/components/beste/block/error30";

export default function NotFound() {
  return <Error30 {...error30Demo} />;
}

Routing is the caller's job, so wire onSearch to your search page:

"use client";

import { useRouter } from "next/navigation";
import { Error30 } from "@/components/beste/block/error30";

export default function NotFound() {
  const router = useRouter();

  return (
    <Error30
      badge={{ label: "Missing" }}
      heading="Tell us what you came for <strong>and we will find it</strong>."
      description="The address you used does not resolve to anything."
      labels={{
        placeholder: "Search the site",
        suggestionsTitle: "Most travelled",
        note: "Search covers every project, note and page we publish.",
      }}
      suggestions={[
        { title: "Recent projects", description: "The last twelve months of work", href: "/work" },
        { title: "How we price", description: "Bands, retainers and what changes them", href: "/pricing" },
      ]}
      onSearch={(query) => router.push(`/search?q=${encodeURIComponent(query)}`)}
    />
  );
}

Props

type Error30Labels = {
  placeholder?: string;
  suggestionsTitle?: string;
  note?: string;
};

type SuggestionItem = {
  title: string;
  description?: string;
  href: string;
};

Behavior notes

• The search field is a controlled React input inside a real form. Submitting prevents the default action and passes the trimmed query to onSearch, so nothing navigates by default and the preview above stays put.
• Without an onSearch handler the form still submits harmlessly, which keeps the block safe to drop in before search exists.
• The input is type="search", so browsers render their native clear affordance, and the placeholder doubles as its aria-label. The circular submit control carries its own written label for screen readers.
• Suggestion rows are separated by top borders rather than a bordered list container, and hover only shifts the trailing arrow from muted to full contrast through the named group/error30 group.
• heading is injected with dangerouslySetInnerHTML and accepts inline HTML; text inside <strong> drops to muted grey. Keep the value under your own control, never user input.