Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Weekly Update Changelog Block for React

One week as five columns, Monday to Friday, on shared hairlines, with a kind filter that dims the changes you are not looking for.

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 weekly changelog for React with Base UI, written for Weeknote, a fictional team update tool. A compact header gives the week, one sentence of what mattered and a Toggle Group at its end: All, New, Improved or Fixed, each with how many changes it holds. Below, a band of five columns on shared hairlines, Monday to Friday, each with its date, its change count and its changes tagged with an icon and a word. Choosing a kind dims every other change to a quiet tint, with a status line saying how many remain, so the five columns never change height. It's built from Toggle Group, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. On a phone the five days stack. For weekly digests, team updates and continuous-delivery products. The product and the changes are example data, and every count comes from the one typed list of days.

FAQ

How do I change the week?

Edit DAYS at the top of the file: a day has a name, an ISO date and its changes, each with a kind (New, Improved or Fixed) and a title. The header's total, the counts on the filter, each day's count and the status line are computed from it, so adding a change updates all of them.

What does the filter do?

It dims, not hides: changes of other kinds take a quiet tint and softer text, and the matching ones stay as they were. A polite status line says "Showing 6 of 17 changes, the Fixed ones. The rest are dimmed." All is always available, and the filter never removes a change from the page or from a screen reader's list.

How does the filter work with a keyboard?

It is a Toggle Group with one choice always on: Tab moves to it, the arrow keys move between kinds and choose the one you reach, and pressing the chosen one again changes nothing. On the Ark UI targets the arrows always move toward the end of the group; on the others they follow the page direction in a right-to-left layout.

Does the layout move when I filter?

No. Dimming changes only colour, never size, so the five columns and the page keep their height with any filter.

How are kinds shown without colour?

Each change carries an outline badge with an icon and the kind's word (New, Improved, Fixed), and the filter's names are the same words. Dimming is a tint plus softer text, never the only signal.

What moves, and what happens with reduced motion?

The header and the columns fade up once on load, and a change's tint eases in and out as you filter. With reduced motion all of that is off and the block simply appears and changes at once.

  • Pro

    Sprint Summary Changelog

    Roadmap and customers

    An iteration picker over a velocity band (points, tasks, completion with a progress bar) and the iteration's entries in three columns, New, Improved and Fixed.

  • Pro

    Monthly Digest Changelog

    Filters and browsing

    Month pills with entry counts above a framed panel that groups the month's entries by type, with a Copy button that puts the whole digest on the clipboard as plain text.

  • Pro

    Grouped Date Changelog

    Lists and timelines

    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.

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

  • Pro

    Team Contributions Changelog

    Contributors

    Four team cells, Frontend, Backend, Platform and DevOps, in a two-by-two grid of overshooting hairlines, each with its people, its change count and its changes, ordered by most changes or by name.

  • Pro

    Year in Review Changelog

    Metrics and charts

    A year of releases behind a split divider: the total in large digits with a Changes or Releases switch, and four quarter rows with their headline release and a bar scaled to the busiest.

All 200 changelog blocks