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.
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.jsonPrefer 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
Split Milestone Changelog
Two-column release entries pairing milestone context with highlights and metrics.
changelog-release-feed
Changelog Release Feed
Release feed cards with aligned change-type labels and an optional CTA per card.
grouped-changelog-board
Grouped Changelog Board
Releases grouped under bold month headings with aligned version and description columns.
milestone-changelog-timeline
Milestone Changelog Timeline
Vertical timeline of releases with a connecting line, version badges, and tone-coded change types.
minimal-text-changelog
Minimal Text Changelog
Ultra-plain, text-only changelog with no badges, cards, or borders.
categorized-release-notes
Categorized Release Notes
Per-release changes grouped into Added, Changed, and Fixed sub-sections.