- Adaptive workflow stages now respond to how each team plans and ships.
- Review threads load 40 percent faster on large projects.
- Fixed a rare case where a closed review thread could reopen itself.
Release Notes Timeline
A free release notes timeline React component with expandable versions and accessible disclosures.
- Live presence shows who is viewing or editing a project in real time.
- Hand-off notes now persist across reassignment and archival.
- Improved contrast for status badges under the light theme.
- Redesigned project navigation with fewer clicks to any resource.
- Search now indexes archived projects by default.
- Reduced initial load time on the workspace overview.
- A public REST API and webhook event stream are now available to every plan.
- New rate limit headers make client-side backoff easier to implement.
Customise
18px
0.32s
18px
20px
Code
<TimelineReleaseNotes
releases={releases}
/>Release Notes Timeline is a free release notes timeline component for Next.js and React, built with Tailwind and Motion. It renders your changelog as one labelled, newest-first ordered list of native disclosures: each version, date and summary sits on a real button, and its full change list unfolds in place without moving anything below it out of natural document flow.
Pass three to ten releases and the component owns single or multi-open disclosure state, alternating or fixed wide-screen card placement, and a once-only entrance for every marker and card. Reduced-motion visitors get the identical expanded state and complete change list with every transition instant, and the newest release is always marked Latest in visible text, not colour alone.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/timeline-release-notesUsage
import { TimelineReleaseNotes } from "@/components/timeline-release-notes";
export default function Page() {
return (
<TimelineReleaseNotes
releases={[
{
id: "v2-4-0",
version: "2.4.0",
date: "2026-06-18",
summary: "Adaptive workflows ship to every plan.",
changes: ["Faster review queue.", "Bug fixes."],
href: "https://example.com/changelog/2-4-0",
},
{
id: "v2-3-0",
version: "2.3.0",
date: "2026-05-02",
summary: "Live presence and durable hand-offs.",
changes: ["Real-time presence.", "Persisted hand-off notes."],
},
]}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| releases | { id: string; version: string; date: string; summary: string; changes: readonly string[]; href?: string }[] | required | Three to ten newest-first releases with unique ids. Duplicate or empty ids are dropped defensively so malformed data never crashes the timeline. |
| initialId | string | undefined | Initially expanded release id. Falls back to the first valid release when omitted or when it does not match any release. |
| density | "comfortable" | "compact" | "comfortable" | Release spacing. |
| branchSide | "left" | "right" | "alternate" | "alternate" | Wide-screen card placement relative to the centre branch line. Small screens always stack in one column regardless of this value. |
| offset | number | 18 | Expand and entrance distance in CSS pixels, clamped to 0-40. |
| expandDuration | number | 0.32 | Disclosure open/close transition duration in seconds, clamped to 0-0.7. |
| markerSize | number | 18 | Timeline marker diameter in CSS pixels, clamped to 12-28. |
| radius | number | 20 | Release card corner radius in CSS pixels, clamped to 0-40. |
| allowMultiple | boolean | false | Whether more than one release disclosure may stay open at once. |
| onExpandedChange | (ids: string[]) => void | undefined | Called after a user opens or closes a release disclosure. |
| label | string | "Release notes" | Accessible name for the release list. |
| className | string | undefined | Additional classes merged onto the section root. |
Customisation
Release Notes Timeline exposes three Tier 3 tokens, each defaulting to a semantic token so it themes with the rest of your site out of the box: release-timeline-accent for the newest release marker and the focus ring, release-timeline-track for the branch line, and release-timeline-panel for the release card surface. Override any of them from your own CSS without touching the component:
:root {
--release-timeline-accent: var(--color-accent-400);
--release-timeline-panel: color-mix(in oklch, var(--primary) 4%, var(--background));
}
<TimelineReleaseNotes releases={releases} className="mx-auto max-w-3xl" />Frequently asked questions
- Is Release Notes Timeline free for commercial use?
- Yes. Release Notes Timeline is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Does the disclosure stay accessible under reduced motion and keyboard use?
- Yes. Every header is a real button with accurate aria-expanded and aria-controls, the panel is a labelled region, and a collapsed panel is marked inert so its content leaves focus and the accessibility tree immediately. Closing a release that has focus inside it returns focus safely to that release's own header rather than to the page. With reduced motion enabled every open and close is instant, the same releases stay expanded, and no marker or card entrance animation runs.
- How does branchSide change the layout, and can I retune the timing?
- branchSide only changes which grid column a card renders into from the md breakpoint up: alternate places cards on opposite sides by their position in the list, while left or right keeps every card on one side. DOM order, chronological order and keyboard order never change, and small screens always use a single column beside a left branch. offset, expandDuration, markerSize and radius are plain numeric props you pass directly, so you can retune the disclosure distance, timing and geometry without editing the component.