Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Year in Review Changelog Block for React

A year of releases behind a split divider: the total in large digits with a Changes or Releases switch, and four quarter rows with their headline release and a bar scaled to the busiest.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A year-in-review changelog for React with Base UI, written for Annualog, a fictional yearbook tool for schools. Behind a split divider the start column holds the title, the year's total in large digits and a Segment Group that counts by changes or by releases; the end column is four quarter rows, October to September. Each row gives the quarter, its headline release (the one with the most changes, with its version and day), its count and a bar scaled to the busiest quarter, which carries a Busiest badge. Switching the count rolls the total to its new value with Sliding Number and re-scales the bars, and because the badge keeps its place in every row, nothing else moves. It's built from Segment Group, Sliding Number, Badge and Guides, with CSS transitions for the bars and your theme's tokens for every colour. For annual recaps, investor updates and end-of-year posts. The product, versions and counts are example data, and every figure comes from one typed list of releases per quarter.

FAQ

How do I change the quarters and releases?

Edit QUARTERS at the top of the file: a quarter has an id, a name, the months it covers and its releases, each with a version, an ISO date, a title and a number of changes. The total, the counts, the bars, the Busiest badge and each quarter's headline (the release with the most changes) are computed from that list.

What does the Changes and Releases switch do?

It changes what the total, the row counts and the bars count: the sum of each quarter's changes, or the number of releases it shipped. The busiest quarter can differ between the two, so the Busiest badge may move to another row, and a polite status line says which count is on.

How does the switch work with a keyboard?

It is a Segment Group: Tab moves to it, the arrow keys move between Changes and Releases and choose the one you reach, and a screen reader hears the choice from its label and a polite status line. In a right-to-left layout the arrows follow the reading direction.

Why are the bars hidden from screen readers?

The bars repeat the number beside them, so they are decoration; the count and its unit ("5 releases") are in the row's text, and the headline release is a sentence with a real version and a dated time element.

Does the layout shift when I switch the count?

No. The Busiest badge is always in the row, hidden with invisible where it doesn't apply so it still takes its space, the total sits in a fixed-width slot and the bars change width only. The rows keep their height in both counts.

What moves, and what happens with reduced motion?

The columns fade up once on load, the bars grow to their new width and the total's digits roll. With reduced motion the entrance is off, the bars jump to their width and the digits settle at once.

  • Pro

    Stats Summary Changelog

    Metrics and charts

    A year of releases as three counters (New, Improved, Fixed) and twelve month columns; focusing a column reads that month's releases into a polite status line.

  • Pro

    Sprint Summary Changelog

    Roadmap and customers

    An iteration picker over a velocity band (points, tasks, completion with a progress bar) and the iteration's entries in three columns, New, Improved and Fixed.

  • Pro

    Monthly Digest Changelog

    Filters and browsing

    Month pills with entry counts above a framed panel that groups the month's entries by type, with a Copy button that puts the whole digest on the clipboard as plain text.

  • Pro

    Weekly Update Changelog

    Lists and timelines

    One week as five columns, Monday to Friday, on shared hairlines, with a kind filter that dims the changes you are not looking for.

  • Pro

    Release Timeline Changelog

    Lists and timelines

    A release timeline for an API client: a compact header with a Subscribe link, then the latest four releases on a hairline rail with dots, each with its version, date, type tags, a linked title and its notes, and View all releases at the foot.

  • Pro

    Changelog Summary About

    Timelines

    A release summary for a release-notes tool: a segmented bar of what changed since launch (added, improved, fixed) with counts, a filter by type and the latest four releases as rows.

All 200 changelog blocks