Changelog Timeline

A release changelog timeline section — version badges, type tags, and a staggered reveal.

A vertical timeline presenting the product's release history. Each release contains a version number badge, a date, a title, and a list of changes, with the changes color-tagged by new / fix / improve type. As it scrolls into the window the items reveal one by one with a stagger, and the node for the latest version carries a spreading glow.

Loading preview…

npx shadcn@latest add https://webberui.com/r/changelog-timeline-section.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Headlineheading

Subheadingsubheading

<ChangelogTimelineSection />

Installation

npx shadcn@latest add https://webberui.com/r/changelog-timeline-section.json

Or, once registries are configured in components.json, install it as @webberui/changelog-timeline-section.

Usage

import { ChangelogTimelineSection } from "@/components/ui/changelog-timeline-section";

<ChangelogTimelineSection
  heading="Changelog"
  subheading="Every new feature, improvement, and fix, all in one place."
  releases={[
    {
      version: "v2.4.0",
      date: "2026-07-10",
      title: "AI summaries and a brand new dashboard",
      latest: true,
      changes: [
        { type: "new", text: "Added the AI weekly digest" },
        { type: "improve", text: "Board loads roughly 40% faster" },
        { type: "fix", text: "Fixed insufficient contrast in dark mode" },
      ],
    },
  ]}
/>

Props

ChangelogTimelineSection

Prop	Type	Default	Description
`releases`	`ChangelogRelease[]`	—	List of release records, best ordered newest to oldest
`heading`	`string`	`"Changelog"`	Main section title
`subheading`	`string`	—	Section subtitle, shown below the main title
`className`	`string`	—	Additional styles, merged and applied to the outermost `<section>`

ChangelogRelease

Prop	Type	Default	Description
`version`	`string`	—	Version number, shown as a badge next to the node
`date`	`string`	—	Release date string
`title`	`string`	—	Summary title for that release
`description`	`string`	—	Optional supplementary description, shown below the title
`changes`	`ChangelogChange[]`	—	List of changes, rendered in order as color-tagged entries
`latest`	`boolean`	—	Whether this is the latest release; the node gets a glow and a "Latest" badge

ChangelogChange

Prop	Type	Default	Description
`type`	`"new" \| "fix" \| "improve"`	—	Change type, deciding the tag color and icon
`text`	`string`	—	One-sentence description of the change

Accessibility

When the user has "reduce motion" enabled at the system level, the reveal offset and the glow pulse on the latest node are disabled and the content is shown directly
The timeline is rendered as a semantic <ol> / <li> structure, and release dates use the <time> element
Decorative elements (the line, the nodes, the icons) are all marked aria-hidden, so they do not interfere with screen readers
Change types are conveyed with text labels (New / Improved / Fixed), not by color alone

Changelog Timeline

On this page