Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Weekly Update Changelog Block for Ark UI

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

All 200 changelog blocks