Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Changelog Viewer Dashboard Block for React

A release-notes reader for a range: From and To selects gather the notes of every release between v4.1 and v4.6 under Breaking, Features, Improvements and Fixes, a release list that marks unread, and Copy as Markdown.

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

Catch up on everything that changed between two versions with this release-notes reader for React with Base UI. A hairline frame with a plus mark on each corner holds a toolbar with From and To Native Selects for the six Patchfolio releases, v4.1 to v4.6, and the notes of every release between them gathered into one reading: Breaking changes first, then Features, Improvements and Fixes, each with a count and the release every line came from. The release list at the start marks which releases are unread and clears the mark when you press it, and Mark range as read clears them all. Copy as Markdown, the one Shine Button, puts the range on the clipboard as Markdown and says whether that worked. It's built from Native Select, Button, Badge and Guides. For release pages, upgrade guides and in-app what's-new panels.

FAQ

How do I add my releases?

Edit RELEASES, oldest first: an id, an ISO date and entries, each with a kind of breaking, feature, improvement or fix and its text. The selects, the list, the counts and the Markdown are all built from it.

What if From is later than To?

The other select follows: choosing a From after To moves To to the same release, and choosing a To before From moves From. The range is always at least one release.

What does Copy as Markdown copy?

A heading with the range, then a section for each kind that has entries, each line a list item ending in its release, such as "(v4.4)". It uses the browser clipboard, which needs a secure page; if it is refused, the status line says so instead of pretending it worked.

What stays local, and how do I wire it for real?

The notes are typed and the read marks live in the page. To make it real, load releases from your changelog, store which releases a person has read with their account, and link each line to its pull request.

How does it look on a phone?

The release list is hidden and the two selects do its job; Mark range as read stays in the toolbar and the unread count says how many remain. The notes scroll in a region of their own.

All 200 dashboard blocks