404 With Recent Writing

Error32: 404 With Recent Writing

The page a renamed article leaves behind: a display headline and a pill call to action above three recent entries, each a full-colour image tile with a plain date line and a bold title.

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

Base UI flavor

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

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

Quick start

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

import { Error32, error32Demo } from "@/components/beste/block/error32";

export default function NotFound() {
  return <Error32 {...error32Demo} />;
}

Then pass your own posts. The meta line is one free-text string, so date and reading time are formatted however you like:

import { Error32 } from "@/components/beste/block/error32";

export default function NotFound() {
  return (
    <Error32
      badge={{ label: "Not Here" }}
      heading="That piece is <strong>no longer at this link</strong>."
      description="Older notes get renamed as they are edited, and this one lost its address."
      button={{ label: "Read everything", href: "/writing" }}
      labels={{ entriesTitle: "Lately" }}
      entries={[
        {
          title: "Drawing before deciding",
          meta: "July 2026, six minutes",
          href: "/writing/drawing-before-deciding",
          image: { src: "/images/sketches.jpg", alt: "Desk with sketches and a laptop" },
        },
        {
          title: "The cost of one more revision",
          meta: "June 2026, nine minutes",
          href: "/writing/one-more-revision",
          image: { src: "/images/review.jpg", alt: "Two people reviewing printed work" },
        },
      ]}
    />
  );
}

Props

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

type EntryItem = {
  title: string;
  meta?: string;
  href: string;
  image: { src: string; alt: string };
};

Behavior notes

• Each entry is one link wrapping the image tile, meta line and title, so the whole tile is clickable and the markup stays a plain anchor.
• Images fill a 4:3 aspect box with object-cover and carry no hover treatment: nothing zooms, dims or shifts, which keeps the grid still while the type does the work.
• Photographs stay in full colour. Only the interface around them is monochrome, so a colourful cover image is expected rather than a mismatch.
• The grid is a single column on mobile and three columns from the md breakpoint up, so three entries fill one row exactly.
• The entry section and its eyebrow only render when entries is non-empty, leaving a plain statement page when there is nothing recent to show.