# Changelog Timeline

> A release log down a line that fills as you scroll, with each entry rising in and its dot filling as the line arrives.

Category: Layout · MotionKit Plus · Updated 2026-10-22 · Live demo: https://motionkitui.com/components/changelog-timeline

## When to use it

Changelogs, release notes, company histories and roadmaps: any list of dated events people scroll through.

## How it works

useScroll tracks the list from when its top reaches the middle of the screen to when its end does, and a spring smooths that into the scale of a line running down the track. Each entry rises in as it scrolls into view, and its dot fills with a small pop once it's well into view, which is about when the line arrives. Dates are real time elements formatted in the reader's locale, and on wide screens they move into their own column.

## Installation

Part of MotionKit Plus (https://motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/changelog-timeline` after adding their registry token from https://motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `entries` | `ChangelogEntry[]` |  | Each release's date, title, description, and optional version and tag. |
| `accent` | `string` | `"#5FAEB4"` | Colour of the line, dots and tags. |
| `locale` | `string` | `"en-GB"` | Locale used to format the dates. |

## Accessibility

- **Keyboard: Not applicable.** Content only; any links you add to entries stay in reading order.
- **Screen readers: Pass.** An ordered list of entries, each with a real <time> element and a heading.
- **Reduced motion: Pass.** With reduced motion on, the line is full, entries are in place and every dot is already filled.
- **Colour contrast: Pass.** Titles measure 17.0:1, descriptions and dates 7.7:1, and tag labels 7.5:1.