Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Release Page Changelog Block for React

A release page as a split: the tag, date, commit with a Copy button and contributors at the start, and the changes, new contributors and a collapsible assets table at the end.

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 release page for React with Base UI, written for Hillhost, a fictional code host, and drawn as a split with a divider from the top rule to the foot. At the start sit the heading and the release's facts: the tag with a "Latest" badge, the day it was published, the commit hash with a Copy button that copies the full 40-character hash, and an avatar stack that reads "11 contributors". At the end the page lists what changed, the new contributors and the assets, a Collapsible open on load that holds a table of five files with their size, a SHA-256 checksum with a Copy button and a Download button. It's built from Collapsible, Copy Button, Avatar, Badge, Button and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For a product's own release pages, download pages and changelogs with checksums. The release, files and digests are example data, and the download links go nowhere.

FAQ

How do I change the release?

Edit TAG, PUBLISHED, COMMIT, CONTRIBUTORS, CHANGES, NEWCOMERS and ASSETS at the top of the file. The "N contributors" text and the "+7" count come from the length of CONTRIBUTORS, and each asset has a name, a size and its whole digest.

What do the Copy buttons copy?

The commit button copies the full 40-character hash, and each checksum button copies the whole SHA-256 digest, although the table shows only its first ten characters. Every button names what it copies ("Copy the SHA-256 checksum of hillhost-1.8.0-source.zip") and announces "Copied" politely.

How does the Assets section work?

It's a Collapsible, open on load, and its trigger is the section's h3. Closing it hides the table from assistive technology and the tab order. The block's height changes when it opens or closes, as a disclosure does.

Do the Download buttons download anything?

No. They are links to #, because the files are example data. Point each at your real release asset; the button's accessible name already includes the file name.

How does it fit on a phone and in a right-to-left layout?

On a phone the facts come first, a rule separates them from the page, and the assets table scrolls sideways inside a focusable region. In a right-to-left layout the split mirrors, while file names, hashes and checksums stay left to right.

  • Pro

    Release Timeline Changelog

    Lists and timelines

    A release timeline for an API client: a compact header with a Subscribe link, then the latest four releases on a hairline rail with dots, each with its version, date, type tags, a linked title and its notes, and View all releases at the foot.

  • Pro

    Commit Log Changelog

    Code and commits

    A git log of seven commits: a short hash with a Copy button for the full one, the commit type as a word, the message, an initials avatar and the day, with a Branch Select that swaps the list.

  • 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

    Git Branch Timeline Changelog

    Code and commits

    A drawn branch graph: main and two feature branches that fork and merge, commit dots by lane, three release tags as badges, and the same events as a list underneath.

  • Pro

    Package Changelog

    Packages and versions

    One package's changelog behind a version select: its semver bump, release day, weekly downloads that count on to each version's figure, a Migration guide link, the install command with a Copy button and the changes in an accordion of groups.

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

All 200 changelog blocks