# Changelog

> Release notes timeline with type filters, cover art and subscribe.

Block · Pro · https://lodeui.com/blocks/changelog

## When to use

- Public changelogs and product update pages.

## When not to use

- Internal deploy history: use the deployments block.

## Installation

```bash
npx shadcn@latest add @lode/changelog
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="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.

## Related

- [Timeline](https://lodeui.com/components/timeline) — Vertical activity timeline with toned icons that stagger in.
- [Footer section](https://lodeui.com/blocks/footer-section) — Site footer with link columns, newsletter, live status and socials.
- [Announcement bar](https://lodeui.com/components/announcement-bar) — A slim dismissible bar above the header that rotates launch messages.