Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Expandable Release Entries Block for React

Four release rows that each open to a sentence and a copyable migration snippet in a focusable code region; the newest is open on load and any number can be open.

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

Expandable release entries for React with Base UI, written for Foldnote, a fictional data-import SDK. A start-aligned header sits over four rows rail to rail, each its own Collapsible: a chevron, the version, the title and the date. Opened, a row shows a sentence and a migration snippet in a labelled, focusable code region with a Copy button above it, so a long line scrolls inside its box. The newest is open on load and any number can be open at once. View all releases ends the block. It's built from Guides, Collapsible, Copy Button and Button, with your theme's tokens for every colour. For SDKs, libraries and any changelog whose entries come with code. The releases are example data.

FAQ

How do I change which entries start open?

The block holds the open rows in one list, opened, which starts with the newest version. Change that list to open others, or leave it empty to start closed.

How do I change a snippet?

Each release has a file name and lines, one string per line; the same lines are shown and copied. The snippet sits in a section named "v3.0.0 migration snippet" that takes focus, so the keyboard can scroll a long line. The Copy button announces "Copied" politely.

Can the keyboard reach a closed row's snippet?

No. A closed row's content is inert, so its code region and Copy button are out of the tab order on every base.

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

Below sm each trigger shows the version and date on one line with the title under them, and a long snippet line scrolls inside its box. In a right-to-left layout the chevron stays a down-and-up chevron, and code stays left to right.

What moves?

The header and the list fade up once on load; a row opens with a height transition that reduced motion turns off.

  • Pro

    Accordion Changelog

    Lists and timelines

    A release list for release-notes software: five releases as accordion rows, each with its version, date, one-line summary and change count, the newest open on a list of typed changes, and a foot band that links to every release.

  • Pro

    Condensed Feed Changelog

    Lists and timelines

    Twelve releases of a news reader as a single-line ledger: the day, a type word, the headline and the version on one row, month rows between, and the older rows opening in place.

  • 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

    Migration Guide Changelog

    APIs and integrations

    A split: a deadline tag and a running progress count at the start, four migration steps at the end, each with a Done checkbox and a copyable config snippet in a collapsible.

  • Pro

    Code Diff Changelog

    Code and commits

    A diffstat header with a drawn five-square glyph and a chip per file, over a framed code window that plays one function's change once and a Copy patch button.

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

All 200 changelog blocks