Manicat UI

Changelog feed

Release notes you can filter, open in place, and scroll through month by month.

Preview
Changelog feed preview

Changelog

Halden 4.12 shipped on September 18, 2026

Showing 14 updates

September 2026

    • Choose two to five columns for each breakpoint.
    • Drag an image and the columns rebalance while you move it.
    • Captions fall back to the image alt text.
    Wavy terracotta walls rising toward a blue sky
    Gallery by Oda Lindqvist Ceramics, Bergen

August 2026

July 2026

June 2026

That is everything since Halden 4.5 in June.

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.

shadcn CLI

Also installs (2)

  • manicat-foundation
  • copy-button
Manual install(+)
registry.jsonjson
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "changelog-feed",
  "type": "registry:block",
  "title": "Changelog feed",
  "description": "Release notes you can filter, open in place, and scroll through month by month.",
  "categories": [
    "blocks"
  ],
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "https://manicat.viraza.net/r/manicat-foundation.json",
    "https://manicat.viraza.net/r/copy-button.json"
  ],
  "files": [
    {
      "path": "registry/blocks/changelog-feed/changelog-feed.tsx",
      "type": "registry:component",
      "target": "@components/manicat/blocks/changelog-feed/changelog-feed.tsx"
    },
    {
      "path": "registry/blocks/changelog-feed/changelog-feed.module.css",
      "type": "registry:component",
      "target": "@components/manicat/blocks/changelog-feed/changelog-feed.module.css"
    },
    {
      "path": "lib/media.ts",
      "type": "registry:lib",
      "target": "@components/manicat/lib/media.ts"
    },
    {
      "path": "registry/components/copy-button/copy-button.tsx",
      "type": "registry:component",
      "target": "@components/manicat/copy-button/copy-button.tsx"
    },
    {
      "path": "registry/components/copy-button/copy-button.module.css",
      "type": "registry:component",
      "target": "@components/manicat/copy-button/copy-button.module.css"
    },
    {
      "path": "lib/use-copy-feedback.ts",
      "type": "registry:lib",
      "target": "@components/manicat/lib/use-copy-feedback.ts"
    }
  ],
  "docs": "Docs and live preview: https://uiarc.dev/components/blocks/changelog-feed",
  "meta": {
    "tier": "free",
    "kind": "block",
    "docs": "https://manicat.viraza.net/components/blocks/changelog-feed",
    "markdown": "https://uiarc.dev/components/blocks/changelog-feed/markdown"
  }
}

Usage

Install the component, then copy this into your app. Change the content and the props to fit your screen.

example.tsxtsx
"use client";

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

export function ChangelogFeedExample() {
  return <ChangelogFeed />;
}

Examples

Real screens rather than isolated props. Switch to Code to copy a whole example into your project.

Product changelog A month-by-month feed of what changed.

Product changelog A month-by-month feed of what changed. preview

What's new

Everything we shipped this quarter.

Showing 14 updates

September 2026

    • Choose two to five columns for each breakpoint.
    • Drag an image and the columns rebalance while you move it.
    • Captions fall back to the image alt text.
    Wavy terracotta walls rising toward a blue sky
    Gallery by Oda Lindqvist Ceramics, Bergen

August 2026

July 2026

June 2026

That is everything since Halden 4.5 in June.

Keyboard interactions

KeysAction
EscapeCancels 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.