Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Monthly Digest Changelog Block for Radix UI

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.

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 monthly digest for React with Radix UI, written for Monthbook, a fictional newsletter tool. A compact header carries Tabs styled as pills at its end: March, February and January 2026, each with the number of entries it holds. The open month fills one inset frame: a bar with the month and its total beside a Copy button, then its entries grouped by type, New, Improved, Fixed and Security, in four cells on shared hairlines, two across from the small breakpoint. Copy puts the whole digest on the clipboard as plain text, headed and grouped the way it reads on screen, ready to paste into a newsletter, and a polite status line tells screen readers it has copied. Every month sits unseen under the open one, so changing tabs never moves the page. It's built from Tabs, Copy Button, Guides and CSS, and takes your theme's tokens for every colour. On a phone the pills scroll sideways and the groups stack. The product, versions and entries are example data.

FAQ

How do I change the months and entries?

Edit MONTHS at the top of the file: a month has an id, a short label, its name and its entries, each with a kind, a version and a title. The counts on the pills, the groups, each group's count and the text that Copy produces are all computed from the entries.

What does the Copy button copy?

A plain-text digest: a title line with the month, then each type as a heading followed by its entries as dashed lines with their versions, separated by blank lines. If the clipboard refuses (a page not served over HTTPS, no permission) the status line says it couldn't copy. Nothing is sent anywhere, and the text can also be selected by hand.

How do the tabs work with a keyboard?

Tab enters the pill list, the arrow keys move between months and open them, and Home and End jump to the ends. On a phone the list scrolls sideways if the pills don't fit. In a right-to-left layout the arrows follow the reading direction.

What does a screen reader hear on a pill?

The month's full name and its entry count ("March 2026, 8 entries"), because the short label and the number are decoration. The panel names its own month and total again in its bar.

Why doesn't the frame change height between months?

An unseen copy of every month's panel sits in the same grid cell as the open one, so the frame is always as tall as the tallest and never moves.

What moves, and what happens with reduced motion?

The header and the frame fade up once on load, and the Copy button swaps its icon for a check. With reduced motion the entrance is off and the icon swap has no scale. Switching months changes the panel at once.

All 200 changelog blocks