Staaarter

Retired Page Record

A monochrome page for content that was intentionally removed, not lost: a headline, a ruled record of when the page was Published, Retired, and Why, then a pill link to the replacement page beside a text link to an archived copy.

By Staaarter Team
Error
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/retired-page-record.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/error/error33.tsx instead.

Usage

The file also exports error33Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Error33, error33Demo } from "@/components/blocks/error/error33";

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

Props

PropTypeDefaultDescription
eyebrowstring"Page retired"Small uppercase label above the headline.
headingstring"This page is no longer available"Main headline.
descriptionstringnoneShort supporting copy under the headline.
publishedDatestring"March 4, 2023"Value for the Published row.
retiredDatestring"June 12, 2026"Value for the Retired row.
reasonstring"Content was consolidated into a single, up-to-date guide."Value for the Why row.
replacementLabelstring"View the current guide"Label for the pill link to the replacement page.
replacementHrefstring"/docs/guide"Link target for the replacement page.
archiveLabelstring"View archived copy"Label for the archive link.
archiveHrefstring"/archive"Link target for the archived copy.
classNamestringnoneExtra classes for the outer section element.

Behavior notes

  • This is a fully static server component; the Published/Retired/Why record is plain text (a definition list), not fetched from any real content-history system.
  • Both the replacement pill and the archive link render as real Next.js Links via the button's render prop, pointing wherever `replacementHref`/`archiveHref` say.