Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Monthly Digest Changelog Block for React

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

  • Pro

    Weekly Update Changelog

    Lists and timelines

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

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

  • Pro

    Stats Summary Changelog

    Metrics and charts

    A year of releases as three counters (New, Improved, Fixed) and twelve month columns; focusing a column reads that month's releases into a polite status line.

  • Pro

    SDK Versions Changelog

    APIs and integrations

    Client libraries in one tabbed window: a tab per language with its latest version, then that version large, its day, a support state as a shape and a word, the install command in a code region with a Copy button, and a table of the last three versions.

  • Pro

    Copy Link Changelog

    Votes and sharing

    Three docs-host releases, each its own cell with an anchor and a Copy link button that puts that release's permalink on the clipboard and says so, with a :target ring on the one the address points at.

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

All 200 changelog blocks