Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Stats Summary Changelog Block for Radix UI

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.

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 release statistics summary for React with Radix UI, written for Tallyleaf, a fictional release analytics tool. Under a centred headline a band of three counters (New, Improved and Fixed) counts up once as it scrolls into view, and each counter doubles as the key to the chart below it: the twelve month columns, October 2025 to September 2026, stack the same three tones and stand as tall as that month's changes against the busiest month. Focusing or pressing a column reads that month's releases into a polite status line under the chart: the month, its release and change counts, and each release with its version, day and title. Every month's readout sits unseen under the live one, so the frame keeps its height whichever column you choose. It's built from Counting Number, Guides and native buttons in a list, with CSS transitions for the entrance and your theme's tokens for every colour. For release analytics pages, year-end changelog roundups and any product that wants to show its pace. The product, versions and counts are example data, and every number is computed from the one typed list of releases.

FAQ

How do I change the releases?

Edit RELEASES at the top of the file: each release has a version, an ISO date, a title and how many changes were added, improved and fixed. The three counters, the column heights, the segments and the readout are all computed from that list, so nothing else needs retyping. MONTHS lists the twelve columns; a month with no release shows an empty column.

How does a keyboard or screen reader use the columns?

Each column is a real button in a list with a full name such as "March 2026: 4 releases, 11 changes", and the open one is marked pressed. Tab moves between months and focusing a month opens it, so its releases are read out through a polite status line without a click. The drawn bars are hidden from assistive technology, because the same facts are in the name and in the line.

How are the three kinds told apart without colour?

By tone and by place: New is the darkest segment, Improved the middle one and Fixed the lightest, always stacked in that order, and the counters above wear the same three squares as a key. The kind names are in the counters and in the readout line ("6 new, 9 improved, 16 fixed"), so nothing depends on seeing the tones.

Why doesn't the frame move when I pick another month?

Every month's readout is stacked unseen in the same grid cell as the live one, so the frame is always as tall as the busiest month. The columns keep a fixed height, and the status line is the only part that changes.

What moves, and what happens with reduced motion?

The header and the panels fade up once on load and the counters count up once in view. With reduced motion the transitions are off and the counters show their final values at once. Choosing a month changes the readout without any motion.

How does it read in a right-to-left layout?

The chart keeps its oldest-to-newest order from the start of the line, as a time axis should, and the counts in the counters and the line are wrapped so digits and words keep their order. Everything else follows the page direction.

All 200 changelog blocks