Minimal Issue ArchivePRO

News43: Minimal Issue Archive

A narrow archive reduced to one hairline row per issue, the subject line on the left and the date it went out on the right, with nothing else on the page to read past.

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

Base UI flavor

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

This installs the block to components/beste/block/news43.tsx and the badge6 component it uses for the eyebrow (installed to components/beste/component/badge6.tsx).

Quick start

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

import { News43, news43Demo } from "@/components/beste/block/news43";

export default function ArchivePage() {
  return <News43 {...news43Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { News43 } from "@/components/beste/block/news43";

export default function ArchivePage() {
  return (
    <News43
      eyebrow="Back issues"
      heading="Everything we have sent"
      issues={[
        { title: "The quote we lost on purpose", date: "18 March 2026", href: "/letters/042" },
        { title: "Two weeks of overlap", date: "11 March 2026", href: "/letters/041" },
      ]}
      note="Nothing is paywalled and nothing is deleted."
    />
  );
}

Props

type Issue = {
  title: string;
  date: string;
  href: string;
};

Behavior notes

• Rows carry a title and a date and nothing else. No issue number, no summary and no image, which is what lets forty rows sit on one page.
• The date is tabular-nums and shrink-0, so dates stay aligned down the right edge and a long title wraps instead of pushing the date off the row.
• Each row is a whole Link with the title moving to the accent colour on hover.
• The column is capped at max-w-3xl, which keeps the gap between a short title and its date from opening into a gulf.