Oversized Numeral 404

Error29: Oversized Numeral 404

The status code set as an oversized numeral carries this page: under a hairline rule the statement and its pill call to action sit on one side, the explanation and a row of display-type links on the other.

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

Base UI flavor

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

This installs the block to components/beste/block/error29.tsx, plus the two design-system primitives it renders through: badge7 for the parenthetical eyebrow and button12 for the pill call to action.

Quick start

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

import { Error29, error29Demo } from "@/components/beste/block/error29";

export default function NotFound() {
  return <Error29 {...error29Demo} />;
}

Then replace the demo with your own props. Keep the link labels to one word each, since they render at display size:

import { Error29 } from "@/components/beste/block/error29";

export default function NotFound() {
  return (
    <Error29
      badge={{ label: "Four Oh Four" }}
      code="404"
      heading="Nothing was ever kept at this address."
      description="No redirect, no archive copy, no quiet replacement."
      button={{ label: "Begin again", href: "/" }}
      labels={{ linksTitle: "Elsewhere" }}
      links={[
        { label: "Work", href: "/work" },
        { label: "Writing", href: "/writing" },
        { label: "Contact", href: "/contact" },
      ]}
    />
  );
}

Props

type ActionLink = {
  label: string;
  href: string;
};

Behavior notes

• The numeral is plain text at text-8xl, rising to text-9xl from the md breakpoint, with tightened leading and tracking so it reads as a graphic element rather than a heading. The real h1 is the statement below it.
• A hairline rule separates the numeral from the two columns, which stack on mobile and split at the lg breakpoint.
• Unlike the other index-style pages in this category, the links here are a wrapping inline row of underlined display-type words, not a ruled list, so three or four short labels work best.
• The heading is plain text, not HTML: this block has no <strong> emphasis treatment.
• Everything is static markup with no client state, so the page renders on the server and works with JavaScript disabled.