ChangelogPro
Release notes timeline with type filters, cover art and subscribe.
What's inside
- Type filters
- Sticky versions
- Cover art
- Subscribe toggle
When to use
- Public changelogs and product update pages.
When not to use
- Internal deploy history: use the deployments block.
Installation
Usage
Import it from @/components/blocks/changelog after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.
example.tsx
import { Changelog } from "@/components/blocks/changelog";
<Changelog entries={[{ version: "1.2", date: "Oct 8, 2026", title: "Dark mode", tags: ["Feature"], items: ["Every screen now supports dark mode."] }]} />API reference
Changelog
A filterable release timeline. Also the default export.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Changelog" | Heading. |
| entries | { version; date; title; tags; items; cover? }[] | – | Newest first; tags: Launch, Feature, Improvement, Fix. |
Keyboard interactions
| Keys | Action |
|---|---|
| Tab | Move through filters and subscribe |
Accessibility
- An ordered list of articles with real dates; filters are a radio group.
Motion
- Entries rise in; filtering animates entries out and closes the gaps.
Responsive behavior
- Versions sit beside entries from 640px and above them on phones.
Performance
- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.
Notes for AI
- Generate entries from your release notes or git tags.
This page as Markdown, for assistants and coding agents:
/blocks/changelog/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt