Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Version Comparison Matrix Changelog Block for React Aria

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.

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 version comparison matrix for React with React Aria, written for Tiergrid, a fictional plan-and-version site. A start-aligned header counts from the data how many features changed between v2.0, v3.0 and v4.0 and carries an "Only what changed" switch at its end. Under it an inset frame with + marks on its corners holds one table: a column per version, each headed by its number and release date, and the features in three groups, each under a heading row. A cell is a check for included, a half-filled circle for partial and a dash for not included, with the same word for a screen reader, and a legend in the frame's foot says them aloud. A feature that changed takes a heavier weight and a bar at its start edge. The switch hides every feature that is the same in all three versions, and the frame keeps its height. It's built from Guides and Switch, with CSS transitions for the entrance and your theme's tokens for every colour. For pricing and release pages. The features are example data.

FAQ

How do I change the features and versions?

Edit VERSIONS for the columns and GROUPS for the rows. A feature has a name and one support level per version (YES, PART or NO) in the order of the versions. "Changed" means the levels are not all the same, and the counts, the legend line and the switch's results are computed from that.

What does the switch do, and why does the block keep its height?

"Only what changed" hides every feature that reads the same in all three versions, and any group that ends up empty. A polite line in the foot says how many features show. The table sits over an unseen copy of the full one, so the frame never changes size when you flip the switch.

How are the three levels told apart without colour?

By shape: a check, a half-filled circle and a dash. Each also carries its word for a screen reader (Included, Partial, Not included), and the legend in the foot says them in plain text.

Is it a real table?

Yes: a native table with a caption, scope on every header, the feature as the row header and each group's name as a row-group header. The region around it has a name and takes focus, so the keyboard can scroll it sideways.

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

Below sm the table scrolls sideways in its region while the feature column stays in view. In a right-to-left layout the table mirrors and the half circle flips, while version numbers keep their reading order.

What moves, and what happens with reduced motion?

The header and the frame fade up once on load, with CSS transitions. With reduced motion they are off. Flipping the switch changes the rows at once.

All 200 changelog blocks