Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Release Banner Changelog Block for React

One release of a documentation platform on one screen: the version large with its day and highlight beside the command that upgrades to it with a Copy button, and a three-cell band of the changes in it, each with a type tag.

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 banner changelog for React with Base UI, written for Headlined, a fictional documentation platform. A start-aligned header carries the title and one sentence; under a rule with + marks, two bands run from rail to rail. The first is a split: at the start the version, large, with the day it shipped and one sentence on what the release is for; at the end a heading, the command that upgrades to it in a labelled, focusable code region with a Copy button that announces when it has copied, and a line on what the command does. The second is three cells, "In this release", each a type tag (an icon and a word: New, Improved, Fixed), a title and one line. Only this release is here, no earlier ones, and the block ends on the three cells. On a phone every part stacks. 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 Copy Button, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For launch posts, docs sites and release hubs that want the latest release and its upgrade path in one place. The release and its command are example data.

FAQ

How do I change the release?

Edit RELEASE (its version, its date as an ISO day, and the highlight sentence), COMMAND (the lines to copy) and CHANGES (each a kind, a title and a line). 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. The block holds one release on purpose: link to a full list of earlier releases from your own page.

How does the Copy button work?

It copies COMMAND, every line of it, to the clipboard and swaps its icon for a check for a moment. A status line, present from load, says "Copied the upgrade command." to a screen reader, and "Could not copy the upgrade command." if the browser refuses. The button has its own name ("Copy the upgrade command"), so it does not rely on its icon.

Why is the command in a focusable region?

A long line of code scrolls sideways inside its box on a phone, so the box is a labelled region the keyboard can reach and scroll with the arrow keys, with a visible focus ring. The code itself is left to right in any layout and is not coloured: the block has no primary action beyond the Copy button.

How are the change types told apart without colour?

Each tag is an outline badge with an icon and the word, so it reads in greyscale, in any theme and to a screen reader, which hears the word and skips the icon. The three kinds are constants at the top of the file; add one more for another kind.

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

Below md the split and the three cells stack, each part under a hairline, so nothing scrolls sideways at 320 pixels except the code region when a line is long. In a right-to-left layout the bands mirror while the version number and the command keep their left-to-right form.

What moves, and what happens with reduced motion?

The header and the bands fade up once on load, with CSS transitions. With reduced motion the entrance is off and the block simply appears. Nothing loops.

  • Pro

    Release Countdown Changelog

    Spotlights and media

    A countdown to the next release of a launch scheduler, in a split: a framed live countdown, the three scheduled changes as a numbered list with type tags, and a Remind me button that turns to Reminder set and back.

  • Pro

    Release Notes Changelog

    Spotlights and media

    One release written as a long article behind a split divider, with a sticky contents list that marks the section on screen and turns into a row of chips on a phone.

  • 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

    Feature Spotlight Changelog

    Spotlights and media

    One release with its headline feature in the spotlight: a drawn greyscale editor with two named cursors beside the title and why it matters, and a band of four smaller changes underneath.

  • Pro

    Numbered Changelog Banner

    Numbered lists

    A release banner for a release-management tool: the latest version set large at the start, and the three before it as a numbered list at the end, split by a solid divider.

  • Pro

    Latest Release Footer

    Content and updates

    A split footer for a feature-flag service that leads with its latest release: a raised panel with version, title and three tagged changes, beside three link columns.

All 200 changelog blocks