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
"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>
);
}