Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Accordion Changelog Block for React

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.

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

An accordion changelog for React with Base UI, written for Pleatnote, a fictional release-notes tool. A centred header carries the title and one sentence; under a rule with + marks, five releases run from rail to rail as accordion rows. Each row's trigger shows the version, the day it shipped, a one-line summary and how many changes it holds, with a plus that turns into a minus; the newest is open on load, so the panel's look shows at a glance. A panel is a list of changes, each tagged with an icon and a word (New, Improved, Fixed, Deprecated, Security), so the kind reads in greyscale and to a screen reader. A foot band closes the block with how many releases exist and a View all releases link, so the list never becomes a long scroll. On a phone the date, summary and count stack inside each trigger. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Accordion, Badge, Button and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For release-notes pages and product changelogs that want a dozen releases scannable on one screen. The releases are example data.

FAQ

How do I change the releases?

Edit RELEASES at the top of the file, newest first. Each release has a version, a date as an ISO day ("2026-10-06"), a one-line summary and its changes, each a type (NEW, IMPROVED, FIXED, DEPRECATED or SECURITY) and a sentence. The count in the trigger comes from the number of changes, and the date on screen is spelled out from the ISO day by a small helper, so it reads the same on the server and in every browser. TOTAL is the number in the foot band: set it to your real release count. Keep to five rows or so; older releases belong behind View all releases.

Which release is open on load, and can several be open?

The newest. It is set by the accordion's default value, which is the first release's version; change it to open another, or empty it to start with every row closed. Opening a row closes the one that was open. Add multiple to the Accordion to let several stay open.

Are the closed panels in the page's markup?

Yes. The Accordion takes hiddenUntilFound, so every closed panel stays in the markup as hidden="until-found": search engines see all the changes, and the browser's find in page opens the release that holds a match.

How does it work with a keyboard and a screen reader?

Each trigger is a button inside its own h3 under the section's h2, so a screen reader's headings list shows every release by version, date, summary and count. Tab moves from row to row and on to View all releases, Enter or Space opens and closes one, and the button says whether it's expanded.

What moves, and what happens with reduced motion?

The header and the rows fade up once on load, with CSS transitions, and a panel eases open under its row while the plus turns into a minus. With reduced motion the entrances are off and the plus becomes a minus without turning. The panels also open and close at once, with no height animation.

How does it fit on a phone?

Below the lg breakpoint the trigger stacks the version and date, the summary and the count in that order, a change's tag sits above its sentence, and the rows run from rail to rail. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout each row mirrors while the version numbers stay left to right.

  • Pro

    Expandable Release Entries

    Lists and timelines

    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.

  • 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

    Compact Timeline Changelog

    Lists and timelines

    The last three weeks of a time-tracking app on one thin rail: six releases of two small lines each, with the dot's shape (circle, diamond, square, ring) telling the kind and a one-line key.

  • 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

    Changelog Features

    Timelines and steps

    A release feed for a changelog tool that presents its features as release entries: a New, Improved and Fixed filter with counts, a version rail, and a collapsible What changed list on each.

  • Pro

    Accordion FAQ

    Accordion lists

    A side-header FAQ for a web analytics tool: the title, one sentence and a contact prompt beside seven questions in an accordion, behind a split divider.

All 200 changelog blocks