Changelog feed

A React block (a whole screen) in Beamline's Blocks category.

An in-app What's new page: release notes grouped by month with tags, versions, pictures and details, a tag filter with counts, entries since your last visit marked as new, and a copyable link to each.

Use it for

A What's new page or panel inside a product: what shipped, when, and what changed for the reader.

Not for

Notifications that need someone's attention now (notification-center).
A record's activity history (timeline).
A single announcement across the app (announcement-bar).

Anatomy

title, description, new count, Mark all as read
tag filter (chips with counts, Clear)
month heading (sticky)
entry: date and version, tags, New badge, title (anchor), summary, picture or live preview, details, author, copy link
"Before your last visit" rule
load older
empty filter result

States

loading (skeleton entries)
new since last visit (badge and rule)
all read
filtered by one or more tags
filter with no entries (clear the filter)
loading older entries
nothing older
error loading older (retry)

Keyboard

Tab: filter chips, then each entry's picture and copy-link button, then Load older
arrow keys move between filter chips; Space or Enter toggles one
Escape closes an opened picture and focus returns to it

Motion

Entries arrive with a short fade when the filter changes; pictures grow into the viewer and back; nothing moves on its own.

Props

Prop	Type	Default	Description
`entries` (required)	`ChangelogEntry[]`	—	id (also the link anchor), date, version, title, summary, body, tags, media ({ src, alt, width, height } or a live preview node), author.
`tags`	`ChangelogTag[]`	—	Labels and tones for tag ids. Defaults to the ids found in entries.
`filter / defaultFilter / onFilterChange`	`string[]`	—	Selected tag ids; empty shows everything.
`lastVisit`	`string \| number \| Date \| null`	—	Entries after it are marked New, with a rule where the older ones start.
`onMarkAllRead`	`() => void`	—	Shows Mark all as read while anything is new; usually you store the new lastVisit.
`permalink`	`(entry) => string`	—	The address Copy link copies. Default: this page's address with #id.
`onLoadMore / hasMore`	`() => Promise<void> / boolean`	—	Load older entries; a rejection offers a retry.
`loading`	`boolean`	—	Skeleton entries in place of the list.
`title / description`	`ReactNode`	`"What's new"`
`locale / timeZone`	`string`	—
`className`	`string`	—
`classNames`	`ChangelogFeedClassNames`	—
`style / ref`	`CSSProperties / Ref<HTMLDivElement>`	—

Built from

chip-group
badge
copy-button
lightbox
bezel
marker
empty-state
skeleton
button
avatar

Dependencies

lucide-react, motion

Import

import { ChangelogFeed } from "@/blocks/changelog-feed/changelog-feed";

Get it

Changelog feed is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent