shadcn.io is not affiliated with official shadcn/ui
Copy Link Changelog Block for React
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.
Installation
Overview
A changelog with a permalink per release for React with Base UI, written for Hashmark, a fictional docs host. Each of the three latest releases is a cell of its own, its lines overshooting its corners, with an id: the version links to that anchor, and a "Copy link" button puts the page's address with the anchor on the end on the clipboard. The result is told three ways: the button swaps its icon for a check, its label changes to "Link copied", and a polite status says "Link to v3.2.0 copied." A refused copy says so as well. When the address already points at a release (open the page with #anchorage-v3-2-0), a CSS :target ring and a tint mark its cell. On a phone the button is icon-only, at the end of the version line. The page's rails and top rule come from the Guides spine. It's built from Guides, Copy Button, Badge and Button, with CSS transitions for the entrance and your theme's tokens for every colour. For release pages, docs sites and any changelog people link to from tickets and chat. The releases are example data.
FAQ
What exactly is copied?
The page's own address (its origin and path, without the query or any existing hash) followed by the release's anchor, for example https://example.com/changelog#anchorage-v3-2-0. The address is read in the browser right after the first render, so the server's markup stays stable; until then the button copies nothing. Make sure each id is unique on the page.
How is the result announced?
A copy that works turns the icon into a check, swaps the label to "Link copied" for a few seconds and writes "Link to v3.2.0 copied." into a polite status, so a screen reader hears it without moving focus. If the browser refuses the clipboard (a page not served over HTTPS, or no permission) the icon becomes a cross and the status says "Couldn't copy the link to v3.2.0." The button keeps its name, "Copy link to v3.2.0", throughout.
What is the :target ring?
When the URL ends in a release's anchor, the browser marks that cell as the target and the block draws a ring and a solid tint on it; it needs no script. The version is a link to the same anchor, so clicking it sets the address and shows the ring. Cells have scroll-mt-24 so a fixed header doesn't cover the one you land on.
How do I change the releases?
Edit RELEASES at the top of the file, newest first. Each has an id (the anchor), a version, a date as an ISO day, its kinds, a title and a summary. Dates are fixed and spelled out by a small helper, so they read the same on the server and in every browser.
Where does View all releases go?
It's a link (href="#"): point it at your full changelog. It's a ghost button, so the block has no primary action.
The button renders the link it's given with render, with nativeButton={false}.
How does it fit on a phone and in a right-to-left layout?
Below sm the Copy link button shows only its icon (its name stays), at the end of the line with the version, day and tags, which wrap if they need to. Nothing scrolls sideways at 320 pixels. In a right-to-left layout the button stays at the end of the line and the version stays in reading order.
Related
- Pro
Release Timeline Changelog
Lists and timelinesA 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
Share Menu Changelog
Votes and sharingThree release rows, each with a Share menu of Copy link, Send by email and Share as a post: Copy link copies the release's own address for real, and the result shows in the row.
- Pro
Bookmark Saves Changelog
Votes and sharingA release list you can save from: six releases as hairline rows in a framed list, each with a bookmark toggle, under a header with All and Saved tabs whose counts follow your saves and an empty state when nothing is saved.
- Pro
Accordion Changelog
Lists and timelinesA 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
Card Grid Changelog
Spotlights and mediaSix releases of a dashboard builder as a bento of cells on shared hairlines: the newest spans two columns and two rows with a short list, the rest are single cells with a feature icon, a type tag, version, date, title and a Read more link.
- Pro
Expandable Release Entries
Lists and timelinesFour 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.