# Changelog feed

A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Blocks](https://beamline.io/components/blocks) category. Live demo: https://beamline.io/components/changelog-feed

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](https://beamline.io/components/notification-center)).
- A record's activity history ([timeline](https://beamline.io/components/timeline)).
- A single announcement across the app ([announcement-bar](https://beamline.io/components/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](https://beamline.io/components/chip-group)
- badge
- [copy-button](https://beamline.io/components/copy-button)
- lightbox
- bezel
- marker
- [empty-state](https://beamline.io/components/empty-state)
- skeleton
- button
- avatar

## Dependencies

`lucide-react`, `motion`

## Import

```tsx
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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Blocks

- [AI agent workspace](https://beamline.io/components/agent-workspace): Threads, a conversation with streamed reasoning, cited answers and a plan that waits for approval then runs step by step, and an artifacts panel with…
- [Analytics dashboard](https://beamline.io/components/analytics-dashboard): A SaaS overview in the app shell, fed by your metrics hook: range and segment filters drive KPIs, new and expansion revenue, channels, plan mix, uptime…
- [Auth page](https://beamline.io/components/auth): The whole sign-in / sign-up route: product mark, a quiet dotted field with a light that follows the mouse, an optional notice, the SignIn and SignupForm…
- [CRM pipeline](https://beamline.io/components/crm): A pipeline screen: KPIs and stage mix derived from a virtualised deals grid with inline edit, bulk moves and delete with undo; a row opens the deal in a…
- [Empty states](https://beamline.io/components/empty-states): The five empty moments every product has, written and wired: first use with a first step, no results with the filters to clear, an error with retry and a…
- [Page header](https://beamline.io/components/page-header): The top of a record or project page: breadcrumb, title with status, description and meta, a primary action with secondary actions that fold into a More…
- [Plan comparison](https://beamline.io/components/plan-comparison): Plans side by side against every feature: prices that roll between monthly and yearly, the current and recommended plan marked, a header that stays in…
- [Settings](https://beamline.io/components/settings): Profile and workspace settings with one draft and real save handler. Personal mode omits workspace data; optional profile fields share validation…
- [Sign in](https://beamline.io/components/sign-in): The sign-in card: email and password, a one-time code or a magic link, passkeys and single sign-on, with validation, progress, errors and a signed-in…
- [Sign up form](https://beamline.io/components/signup-form): The account creation card: single sign-on, name, work email and a password with strength and Caps Lock hints, terms consent, inline validation, your…
- [Step form](https://beamline.io/components/step-form): The finished frame for any multi-step form you compose — onboarding, intake brief, questionnaire, booking, application: a wide card with progress, the…
- [Trading terminal](https://beamline.io/components/trading-terminal): A perpetuals terminal on your feed and your account: ticker tape, market header with funding, candles, book / trades / depth, order ticket, account…
- [Voice agent](https://beamline.io/components/voice-agent): A voice agent in three layouts on one session: a support panel that mixes typing and talking, a call screen with the agent's orb and one call button, and…