Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Release Range Comparison Changelog Block for React Aria

A split with two release selects, a count of what changed between them as New, Improved, Fixed and Breaking, and the releases in the range as an ordered list.

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 range for React with React Aria, written for Rangewise, a fictional release-notes tool. A split behind a divider that runs from the spine's top rule. At the start a header whose title names the range ("What changed between v3.6.0 and v4.0.0"), two selects (From and To) and under them four counts on shared hairlines (New, Improved, Fixed, Breaking), each an icon, a word and a number added up from the releases in the range. At the end the releases themselves as an ordered list, newest first, each with its version, its day and a chip for every kind of change it holds. Choosing a release recomputes everything. It's built from Select, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For upgrade guides and release pages. The releases are example data.

FAQ

How do I change the releases?

Edit RELEASES at the top of the file, newest first: a version, a day and how many changes of each kind it holds. The range, the four counts, the list and the selects' options are all computed from it.

Which releases does a range include?

Everything after the From release, up to and including the To release. Going from v3.6.0 to v4.0.0 adds up v3.6.1 and every release since, but not v3.6.0 itself, because you already have it.

What if I choose a To that comes before From?

The other select moves to keep the range in order, and a polite line under the selects says which one moved and to what. From never offers the newest release and To never offers the oldest, so a range always holds at least one release.

Does the block change size when the range changes?

No. The list sits over an unseen copy of the longest range, so the block keeps its height whatever you choose.

How does it work with a keyboard and a screen reader?

Each select is a labelled control: "From release" and "To release". Choosing an option updates the counts and a polite line that says how many releases show. The trigger opens with Enter or Space and Escape closes it.

How does it fit on a phone and in a right-to-left layout?

The two selects always stack, and below lg the counts come before the releases with a rule between them. In a right-to-left layout the block mirrors while versions and numbers keep their reading order.

All 200 changelog blocks