Release Notes

Component

About

Release notes timeline: versions with dates, changes marked Added, Changed, Fixed or Security in words and icons, a filter by kind, Show older, and a copy-link per version. From the Landing & Docs Starter → ai.osagi.finance/kits/landing-docs

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

Code

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

Usage.tsx

"use client";

import { type Release, ReleaseNotes } from "@/components/ui/release-notes";

const settings = {
  initialCount: 3,
  title: "Release notes",
};

const RELEASES: Release[] = [
  {
    changes: [
      { kind: "added", text: "Exports: every report downloads as CSV." },
      {
        kind: "fixed",
        text: "The date filter keeps its month after a reload.",
      },
    ],
    summary: "Exports and a steadier filter.",
    version: "2.3.0",
  },
  {
    changes: [
      { kind: "security", text: "Sign-in codes expire after five minutes." },
      { kind: "changed", text: "Sessions end after 30 days without activity." },
    ],
    date: "2026-10-12",
    version: "2.2.1",
  },
  {
    changes: [
      {
        kind: "added",
        text: "Dark theme, following the system or your choice.",
      },
      {
        kind: "changed",
        text: "The search looks through page text, not only titles.",
      },
      { kind: "fixed", text: "Tables no longer widen the page on a phone." },
    ],
    date: "2026-10-01",
    summary: "Themes and a better search.",
    version: "2.2.0",
  },
  {
    changes: [
      { kind: "fixed", text: "Printing keeps the code blocks on one page." },
    ],
    date: "2026-09-18",
    version: "2.1.1",
  },
  {
    changes: [
      { kind: "added", text: "A print view of the whole manual." },
      { kind: "security", text: "Uploads are checked by type on the server." },
    ],
    date: "2026-09-02",
    version: "2.1.0",
  },
  {
    changes: [
      {
        kind: "added",
        text: "The first release: pages, search and a changelog.",
      },
    ],
    date: "2026-08-15",
    version: "2.0.0",
  },
];

/** Six releases, newest first: filter by kind, show the older ones, copy a link to a version. */
export default function Demo(props: Partial<typeof settings>) {
  const { initialCount, title } = { ...settings, ...props };
  return (
    <div className="flex min-h-[600px] w-full justify-center bg-background p-6">
      <ReleaseNotes
        initialCount={initialCount}
        releases={RELEASES}
        title={title}
      />
    </div>
  );
}