Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Pull Request Changelog Block for React

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.

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 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.

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

Below md the diff goes. The number, the state and the copy button share the first line, the title sits under them, and the day moves beside the author. In a right-to-left layout the rows mirror, while numbers and the diff stay left to right.

  • Pro

    PR Review Queue Changelog

    Code and commits

    A framed table of eight open pull requests with a state toggle (counts included), a Sort select, reviewers as stacked initials, approvals as ticks, an age in days and a Stale badge from six days.

  • Pro

    Linked Issues Changelog

    Code and commits

    Two releases as cells that overshoot their lines, each change ending with an issue chip that opens a card with the issue's title, state and assignee, and a foot that counts the issues each release closes.

  • 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

    Cherry-Pick Log Changelog

    Code and commits

    A table of eight cherry-picks with a Checkbox per row and a result word, a Target branch Select that filters it, and a script of the ticked picks with a Copy script button.

  • 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

    Release Page Changelog

    Spotlights and media

    A release page as a split: the tag, date, commit with a Copy button and contributors at the start, and the changes, new contributors and a collapsible assets table at the end.

All 200 changelog blocks