Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Release Range Comparison Changelog Block for React

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 Base UI, 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, Space or the arrow keys, 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.

  • Pro

    Version Comparison Matrix Changelog

    Filters and browsing

    A framed feature table across three versions with a check, a half circle or a dash in each cell, grouped by category, and an Only what changed switch that keeps the height.

  • Pro

    Before After Changelog

    Spotlights and media

    A compare slider for a design-handoff tool's release: one drawn editor window, its fourteen cramped toolbar icons before and three labelled groups after, under a draggable divider that also answers the arrow keys, with a short table of what changed.

  • Pro

    Impact Badges Changelog

    Lists and timelines

    Seven fixes with an impact meter of one to four rising bars and a word, a band that counts each level, and a Sort by Select that reorders the rows by impact or by date.

  • Pro

    Lanes With Gates Release Train

    Deploys and rollouts

    A release-train table: a lane per train, a column per station (Dev, Staging, Canary, Production), each cell a gate shape and word with a hover card of its checks, and the departure time at the end of the lane.

  • Pro

    Accordion Changelog

    Lists and timelines

    A release list for release-notes software: five releases as accordion rows, each with its version, date, one-line summary and change count, the newest open on a list of typed changes, and a foot band that links to every release.

  • 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.

All 200 changelog blocks