Error33: Retired Page Record

The page for content that was removed on purpose: a display headline, a ruled record of when it was published, when it was retired and why, then a pill link to whatever replaced it.

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

Base UI flavor

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

This installs the block to components/beste/block/error33.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 error33Demo alongside the block: the exact props behind the preview above. Spread it to get a working retirement notice in one line.

import { Error33, error33Demo } from "@/components/beste/block/error33";

export default function Gone() {
  return <Error33 {...error33Demo} />;
}

Then pass the record for the page that was taken down:

import { Error33 } from "@/components/beste/block/error33";

export default function Gone() {
  return (
    <Error33
      badge={{ label: "Retired" }}
      heading="We took this page down <strong>and meant to</strong>."
      description="It described a way of working we no longer stand behind."
      labels={{
        recordTitle: "The record",
        note: "Retired pages keep their address so old citations do not break.",
      }}
      rows={[
        { title: "Published", value: "March 2023" },
        { title: "Retired", value: "June 2026" },
        { title: "Reason", value: "Superseded" },
      ]}
      button={{ label: "Read what replaced it", href: "/writing/current" }}
      link={{ label: "Browse the full archive", href: "/archive" }}
    />
  );
}

Props

type Error33Labels = {
  recordTitle?: string;
  note?: string;
};

type RecordRow = {
  title: string;
  value: string;
};

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

Behavior notes

• The record is a dl laid out as a ruled grid, three columns from the sm breakpoint up, with each pair under its own top border rather than inside a boxed cell.
• Values sit at display size above their small muted labels, so dates read as the primary information in each cell.
• The note under the actions is deliberately separate from the description: it explains the policy (the URL stays alive) rather than the specific page, so it can stay constant across every retired page.
• Serving this block with a 410 Gone status rather than a 404 tells crawlers the removal was intentional, which is the case this layout is written for.
• Everything is static markup with no client state, so the page renders on the server and works with JavaScript disabled.