Changelog List

Component

About

A list of product updates sorted newest first, for a public changelog page or a compact "what's new" popover, with entries since the reader's last visit marked as new.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Changelog List to your project and fits it to your theme.

Code

How Changelog List is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  ChangelogList,
  type ChangelogEntry,
} from "@/components/ui/changelog-list";

const DAY = 86_400_000;
const daysFromNow = (days: number) => new Date(Date.now() + days * DAY);

// Synthetic release notes for a fictional product — no real company, no third-party marks.
const CHANGELOG: ChangelogEntry[] = [
  {
    id: "c4",
    date: daysFromNow(-1),
    version: "v2.14",
    title: "Workflows can now post to any webhook",
    tags: ["New"],
    body: "Point a workflow at any HTTPS endpoint. Payloads are signed, retried with backoff, and every delivery is listed with its response.",
  },
  {
    id: "c3",
    date: daysFromNow(-6),
    version: "v2.13",
    title: "Dashboards load twice as fast",
    tags: ["Improved"],
    body: "Charts now stream in as their queries finish instead of waiting for the slowest one.",
  },
  {
    id: "c2",
    date: daysFromNow(-15),
    version: "v2.12",
    title: "Fixed CSV exports with non-Latin column names",
    tags: ["Fixed"],
    body: "Exports are now UTF-8 with a byte-order mark, so spreadsheets open them correctly.",
  },
  {
    id: "c1",
    date: daysFromNow(-28),
    version: "v2.11",
    title: "SCIM provisioning for Team and Enterprise",
    tags: ["New", "Security"],
    body: "Create, update and deactivate members from your identity provider.",
  },
];

export default function ChangelogListDemo() {
  return (
    <div className="flex w-full items-center justify-center bg-canvas p-6 text-ink">
      <div className="w-full max-w-[560px] rounded-[var(--radius-card)] border border-line bg-surface p-5 shadow-[var(--shadow-card)]">
        <ChangelogList entries={CHANGELOG} unreadSince={daysFromNow(-10)} />
      </div>
    </div>
  );
}