Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Grouped Date Changelog Block for React Aria

Changes grouped by the day they shipped: each day has a drawn calendar tile (month, big day number, weekday) beside a dated heading and its changes with a type tag, a sentence and the release.

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 day-grouped changelog for React with React Aria, written for Duskpage, a fictional journaling app. A start-aligned header over four day rows on shared hairlines, newest first. Each row has two cells: at the start a drawn calendar tile (the month on a tinted strip, the day number large, the weekday small, in a hairline frame), at the end the day's heading, the full date with the weekday first, and a list of that day's changes, each with a type tag (an icon and a word), a sentence and the release it went out in. The tile is decoration; the date is the heading. "View all releases" ends the block. On a phone the tile sits above the list. It's built from Guides, Badge and Button, with your theme's tokens for every colour. The releases are example data.

FAQ

How do I change the days and the changes?

Edit DAYS at the top of the file, newest first: each day has a date as an ISO day, its weekday written out, and a list of changes, each with a kind, a text and the version it shipped in. The tile, the heading and the list follow. Several releases on the same day simply share a row.

Why is the weekday typed in the data?

So nothing computes a date at render: the server and every browser draw the same words, and no time zone can move a day. If you edit a date, edit its weekday with it.

What does a screen reader hear?

A list of days; each day's heading is its full date ("Tuesday, March 31, 2026") as a time element, followed by a list of changes read as the type, the sentence and the version. The calendar tile repeats the date visually and is hidden from assistive technology so nothing is read twice.

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

Below sm the tile sits above the heading and list, and each change stacks its tag, sentence and version. In a right-to-left layout the tile moves to the start edge, which is the right-hand side, and versions keep their reading order.

What moves, and what happens with reduced motion?

The header and list fade up once on load. With reduced motion they appear at once. Nothing else moves.

All 200 changelog blocks