Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Inline Code Changelog Block for React

Three releases of an API client whose routes, flags and headers are code chips that copy their own text on click, with a tooltip, a polite Copied line and one key shown as a Kbd.

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 changelog for React with Base UI, written for Tickcode, a fictional API client. A start-aligned header carries the title and one sentence over a polite line that first says "Click a term to copy it" and then "Copied" with the term. Under a band rule three releases run rail to rail, newest first. Each has the version in mono, the day and the type tags (an icon and a word) at the start, and a title and sentences at the end. Every route, flag and header in those sentences is a code chip and a real button: pressing it copies exactly that term, turns the chip solid for a moment, changes its tooltip from Copy to Copied and says so in the polite line, and if the clipboard refuses the line says that instead. One sentence shows the Esc key as a Kbd. It's built from Tooltip, Kbd, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For API clients, SDKs and command-line tools whose release notes are full of things people paste. The releases and terms are example data.

FAQ

How do I change the releases and the terms?

Edit the three release constants at the top of the file for the version, the ISO date, the type tags and the title, and the three note components for the sentences. A term is written in place as <Term term="--retry 1" onTake={onTake} />: the string is what lands on the clipboard, character for character, and what shows on the chip. Dates are fixed, never computed from today, and are spelled out by a small helper so the server and every browser write them the same way.

What does a chip copy, and what if the browser refuses?

It copies the exact term string with the Clipboard API, which needs a secure page (HTTPS or localhost). After a copy the chip turns solid for about a second and a half and the polite line reads "Copied" and the term. If the browser refuses, the line reads "Couldn't copy: the clipboard refused." and the chip stays as it was. Nothing is sent anywhere.

Does it work with a keyboard, a screen reader and a phone?

Each chip is a native button in the tab order, named by its own text, with a visible focus ring; Enter or Space copies. The polite line is a status region that is on the page from the start, so a screen reader announces each change. The tooltip is an extra, not the only cue, so a phone, which has no hover, still gets the solid chip and the line. Base UI's tooltip trigger renders the native button itself.

How is the key in the sentence made?

It is a Kbd inside the sentence ("Press Esc to stop a chain that is still running"). It is only text: the block listens to no keys, so the hint is yours to wire to a real shortcut.

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

Below lg each row stacks: the version, the day and the tags above the title and the sentences. Chips wrap with the text, and nothing scrolls sideways at 320 pixels. In a right-to-left layout the rows mirror, while every chip stays left to right so a path, a flag or a header keeps its characters in order.

What moves, and what happens with reduced motion?

The header and the list fade up once on load, with CSS transitions, and a chip fades to solid when it is copied. With reduced motion the entrance and the fade are off and the block simply appears.

  • 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

    CLI Output Changelog

    APIs and integrations

    One command in a terminal window whose output switches between text, JSON and Markdown over the same five releases, with a Copy button for the command and an exit status.

  • Pro

    API Endpoint Changelog

    APIs and integrations

    One new endpoint spotlighted in a split: its method, path and version, a table of the new request fields, and a tabbed window with the request, the response and the error codes in focusable code regions with Copy buttons.

  • Pro

    Config Changes Ledger Changelog

    Data and config

    A change ledger of settings with the old value struck through and the new one after an arrow, an environment Select, and a Copy button for each row's rollback command.

  • 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

    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