Changelog Timeline
A changelog with sticky release dates, New/Improved/Fixed filters and collapsible notes.
Overview
A changelog people actually read. Each release has a date and version that stay pinned while you scroll through its notes, a short title and summary, and changes labelled New, Improved or Fixed in a consistent column so they scan like a list.
Filter pills show counts per type and hide releases with nothing matching. Long releases collapse after a few lines with a Show all link. On mobile the date sits above each release.
Use it for product changelogs, release notes and “what’s new” pages. Feed it from Markdown front matter or your CMS.
When to use
- Marketing and product pages that need a complete, responsive band of content.
When not to use
- Inside dense app screens, where a smaller component fits better.
Installation
pnpm dlx shadcn@latest add https://sundaeui.dev/r/changelog-timeline.jsonnpx shadcn@latest add https://sundaeui.dev/r/changelog-timeline.jsonyarn dlx shadcn@latest add https://sundaeui.dev/r/changelog-timeline.jsonbunx --bun shadcn@latest add https://sundaeui.dev/r/changelog-timeline.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy changelog-timeline.tsx into components/sundae/.
- Make sure Tailwind scans that folder (v4 detects it automatically; v3 needs it in `content`).
- Import the component and use it as shown below.
Usage
import { ChangelogTimeline } from '@/components/sundae/changelog-timeline'
<ChangelogTimeline releases={[{ version: '3.4.0', date: '2026-10-28', title: 'Shared views', changes: [{ kind: 'new', text: 'Save filters as views.' }] }]} />Props
| Prop | Type | Default |
|---|---|---|
releases*{ version, date (ISO), title, summary?, changes: { kind: new|improved|fixed, text }[] }. | Release[] | — |
collapseAfterLines shown before Show all. | number | 4 |
Accessibility
- Releases are an ordered list with real <time> elements.
- Filters are a labelled radio group with counts.
- Change types are written out, not shown by colour alone.
Customization
- Edit KIND to add types such as “Security” or “Deprecated”.
FAQ
- Is Changelog Timeline free?
- Changelog Timeline is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Changelog Timeline?
- Run npx shadcn@latest add https://sundaeui.dev/r/changelog-timeline.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Changelog Timeline support keyboard and screen readers?
- Releases are an ordered list with real <time> elements. Filters are a labelled radio group with counts.
- Does Changelog Timeline respect reduced motion?
- Yes. With prefers-reduced-motion set, decorative motion is removed and state changes are instant.
More like this
All sections →Margin Quote
Sections · Editorial- Pro
Ledger Pricing
Sections · Editorial - Pro
Billboard Hero
Sections · Brutalist - Pro
Bento Features
Sections · Understated - Pro
Newsletter CTA
Sections · Refined - Pro
Product Footer
Sections · Understated