shadcn.io is not affiliated with official shadcn/ui
Inline Code Changelog Block for React Aria
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.
Installation
Overview
A changelog for React with React Aria, 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. React Aria's tooltip trigger wraps a React Aria button, and the chip is that button.
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.