Staaarter

Newspaper Changelog

An editorial, newspaper-inspired changelog layout: a bordered masthead header, a featured 'headline story' for the latest release spanning two text columns, a sidebar of shorter briefs for older releases, and a numbered list of granular patch notes flowing across newspaper-style columns.

By Staaarter Team
Changelog
Docs
Live preview

Docs

Installation

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

npx shadcn add https://staaarter.com/r/newspaper-changelog.json

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

Usage

The file also exports changelog25Demo, 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 { Changelog25, changelog25Demo } from "@/components/blocks/changelog/changelog25";

export default function Page() {
  return <Changelog25 {...changelog25Demo} />;
}

Props

PropTypeDefaultDescription
publicationNamestring"The Release Gazette"Masthead title.
editionstring"Product Edition"Edition line under the masthead.
featuredVersionstringnoneVersion string for the featured headline release.
featuredDatestringnoneDate string for the featured headline release.
featuredHeadlinestringnoneHeadline for the featured release.
featuredBodystringnoneLonger editorial description of the featured release, flows into two columns on larger screens.
briefsChangelog25Brief[]noneCondensed one-line summaries of older releases for the sidebar.
notesChangelog25Note[]noneNumbered granular patch notes, laid out in newspaper columns.
classNamestringnoneExtra classes for the outer section element.

Types

interface Changelog25Brief {
  id: string;
  version: string;
  date: string;
  text: string;
}

interface Changelog25Note {
  id: string;
  number: number;
  text: string;
}

Behavior notes

  • Fully static server component: no client-side state or handlers.
  • Column layout uses CSS `columns`/`break-inside-avoid` only; no JS measures or reflows content.
  • Dates are plain string props (e.g. "March 10, 2026"), never computed via `new Date()`.