Changelog
ProRelease notes on a page: the date and version in a column that stays in view, then tags, the title, a live picture, the story and smaller changes. Every entry has its own link.
npx prodular-ui add changelogPart of Prodular UI Pro. Preview and read the docs freely, install with a license. See pricing
Two releases
One with a picture and smaller changes, one with text only.
- v4.11
- v4.10
import { BarList } from "@/components/ui/bar-list"import { Changelog } from "@/components/ui/changelog"
export default function ChangelogEntries() { return ( <div className="w-full max-w-4xl py-6"> <Changelog timeZone="UTC" entries={[ { id: "netsuite-sync", date: "2026-10-07", version: "v4.11", title: "NetSuite sync is four times faster", tags: ["Improved", "Integrations"], media: ( <div className="p-6"> <BarList sortOrder="none" data={[ { name: "Before", value: 412 }, { name: "Now", value: 96 }, ]} valueFormatter={(v) => `${Math.floor(v / 60)}m ${v % 60}s`} /> </div> ), summary: <p>We moved to the REST API and sync only what changed. Large accounts that took seven minutes now finish in under two.</p>, items: ["Sync errors show the record that failed", "Retry a failed sync from the log"], }, { id: "xero-currencies", date: "2026-09-23", version: "v4.10", title: "Multiple currencies in Xero", tags: ["Fixed"], summary: <p>Invoices in a currency other than the Xero base currency now post with the right exchange rate.</p>, }, ]} /> </div> )}Anatomy
<Section> <Changelog timeZone="UTC" entries={releases} /></Section>Guidance
Use it when
- New, Improved and Fixed as the first tag; they get their own colors.
- A sentence on why the change matters, not only what changed.
Avoid
- Internal ticket numbers and code names.
- A picture on every entry. Save it for changes people can see.
Rules for AI agents
Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.
- Use a stable id per entry; it is the anchor people link to.
- Pass timeZone so dates do not shift by a day on the server.
API
Changelog
| Prop | Type | Default | Description |
|---|---|---|---|
| entries | { id, date, version?, title, tags?, summary, media?, items? }[] | Newest first. | |
| timeZone | string | Time zone for the dates, like UTC. |
Installation
The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.
npx prodular-ui add changelog# or, with the registry in components.jsonnpx shadcn@latest add @prodular/changelog