Changelog feed

• Type: Block

• Page: https://ui.xzero.co.uk/components/blocks/changelog-feed

• Markdown: https://ui.xzero.co.uk/components/blocks/changelog-feed/markdown

• Access: Free, open source

• Registry id: changelog-feed

• Source file: registry/blocks/changelog-feed/changelog-feed.tsx

• Built from: Copy button

• Keywords: react changelog, release notes page, changelog component, product updates feed, what's new page, changelog with filters

Use this for a product changelog page. Load entries from your release notes source and connect the subscribe control to your mailing list.

When to use

• A product changelog or release notes page grouped by month.
• Release notes with type filters such as features, fixes, and improvements.
• Changelogs that should offer an email subscribe action in the header.

When not to use

• Use timeline for a short vertical list of events without filters.
• Use accordion for plain expandable content that is not dated.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui/changelog-feed

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

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

export default function ChangelogPage() {
  return (
    <main>
      <ChangelogFeed />
    </main>
  );
}

API reference

ChangelogFeed

Release notes grouped by month, with type filter chips, expandable entries with media, a month jump nav, and an inline subscribe form. Entries, images, and the webhook snippet are sample data.

No props.

Keyboard interactions

Keys	Action
Escape	Cancels the subscribe form and returns to the Subscribe button.

Accessibility

• Each entry row is a button with aria-expanded and aria-controls pointing at its detail panel.
• Filter chips are toggle buttons with aria-pressed, and the visible count is announced in a polite status region.
• The month nav marks the current month with aria-current, and the scroll area is focusable with an aria-label.

Motion

• Entries open in place on a spring while the chevron rotates; the month label slides in the scroll direction.
• The subscribe control morphs from button to form to a drawn check with a short blur crossfade.
• Reduced motion makes these changes instant.

Responsive behavior

• Below 640px the header stacks, rows move date and type above the text, and the scroller drops from 560px to 520px.
• Below 480px month counts and the shown count are hidden so the month nav fits on one line.
• Hover styles apply only on hover-capable fine pointers.

Performance

• The feed scrolls inside a fixed-height area; entries are not virtualized, so paginate or load older months on demand.
• Scroll tracking for the month bar is batched to one requestAnimationFrame, and a ResizeObserver resyncs it on resize.

Notes for AI

• Use for a product changelog or release notes page.
• Replace the entries array and the imported sample images with data from your release notes source or CMS.
• The subscribe submit only changes local state; post the email to your mailing list provider.

Related

• Timeline: Follow what happened, newest first, grouped by day.
• Accordion: Progressively reveal supporting information in place.
• Copy button: Copy a value with immediate confirmation.
• Chip group: Filter by a few facets with chips that morph as you pick them.

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt