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

Prop	Type	Default	Description
publicationName	string	"The Release Gazette"	Masthead title.
edition	string	"Product Edition"	Edition line under the masthead.
featuredVersion	string	none	Version string for the featured headline release.
featuredDate	string	none	Date string for the featured headline release.
featuredHeadline	string	none	Headline for the featured release.
featuredBody	string	none	Longer editorial description of the featured release, flows into two columns on larger screens.
briefs	Changelog25Brief[]	none	Condensed one-line summaries of older releases for the sidebar.
notes	Changelog25Note[]	none	Numbered granular patch notes, laid out in newspaper columns.
className	string	none	Extra 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()`.

More Changelog Blocks

View all →

Split Milestone Changelog

Two-column release entries pairing milestone context with highlights and metrics.

Changelog Release Feed

Release feed cards with aligned change-type labels and an optional CTA per card.

Grouped Changelog Board

Releases grouped under bold month headings with aligned version and description columns.

Milestone Changelog Timeline

Vertical timeline of releases with a connecting line, version badges, and tone-coded change types.

Minimal Text Changelog

Ultra-plain, text-only changelog with no badges, cards, or borders.

Categorized Release Notes

Per-release changes grouped into Added, Changed, and Fixed sub-sections.