shadcn.io is not affiliated with official shadcn/ui
Pull Request Changelog Block for Radix UI
Five pull requests as an ordered list rail to rail: number, title, author, a diff size with five squares (solid for added lines, hollow for removed), a state with an icon and a word, and a button that copies the checkout command.
Installation
Overview
A changelog for React with Radix UI, written for Mergelane, a fictional code-review tool. A start-aligned header sits over one ordered list that runs rail to rail and ends the block, newest first. Each row has the pull request's number in mono, its title as a heading with the author as initials and a name, the size of the diff, the state and the day, and an icon button. The diff is the added and removed line counts, with a true minus, over five squares: solid for added lines, hollow for removed ones, in proportion. The state is an icon and a word (Merged, Open or Closed). The button copies the checkout command for that pull request. It's built from Avatar, Copy Button and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For code hosts, review tools and open-source projects whose release notes are really lists of changes. The pull requests, names and command are example data.
FAQ
How do I change the pull requests?
Edit PULLS at the top of the file, newest first. A pull request has a number, a title, an author, an ISO date, added and removed line counts and a state, which is one of three constants: Merged, Open or Closed. Dates are fixed, never computed from today.
How are the five squares worked out?
addedSquares rounds five times the added share of all changed lines. That many squares are solid and the rest hollow, so a pull request that mostly deletes shows mostly hollow squares, and a small change that adds under a tenth shows five hollow ones. The squares are decoration: the counts are in text, each with a hidden "Added" or "Removed" for screen readers.
How are the states told apart without colour?
Each state is a git icon and a word, so Merged, Open and Closed read the same in any theme and for any user. The shapes of the diff squares carry meaning too (solid or hollow), not hue.
What does the button copy?
The command mergelane checkout and the number, a made-up command: change checkoutOf to yours. It uses the Clipboard API, which needs a secure page, and announces "Copied" politely. Each button is named for its own pull request, so a screen reader can tell them apart. Nothing is sent anywhere.