Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Grouped Date Changelog Block for React

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 Base UI, 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.

  • Pro

    Author Grouped Changelog

    Contributors

    The twelve changes of one code-review tool's release regrouped by a toggle: by author, each cell a person with their changes and a type tag each; by type, each cell a kind of change with who made it.

  • Pro

    Category Sections Changelog

    Filters and browsing

    A changelog for a file organiser grouped under Added, Improved and Fixed headings, with a sticky index of the three sections beside them and every change tagged with the release it shipped in.

  • Pro

    Condensed Feed Changelog

    Lists and timelines

    Twelve releases of a news reader as a single-line ledger: the day, a type word, the headline and the version on one row, month rows between, and the older rows opening in place.

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

  • Pro

    Compact Timeline Changelog

    Lists and timelines

    The last three weeks of a time-tracking app on one thin rail: six releases of two small lines each, with the dot's shape (circle, diamond, square, ring) telling the kind and a one-line key.

  • Pro

    Filterable Changelog

    Filters and browsing

    The plainest filtered release list: one row of choices with counts (All, New, Improved, Fixed, Security) over nine releases, a live count of what is showing, and a height that never changes.

All 200 changelog blocks