Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Code Diff Changelog Block for React

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.

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 code-diff changelog for React with Base UI, written for Patchfold, a fictional code-review bot. A header names the pull request, then a diffstat band shows "+142 −37 across 5 files" with a drawn glyph of five squares (solid for the share added, hollow for the share removed) and a chip for each file with its own counts. Under it a framed code window plays the change to one function once, with the Diff Text component: removed lines are struck through and marked "-", added lines are marked "+", and the tint behind them is only a faint foreground mix. A Copy patch button in the window's bar copies the real unified diff. It's built from Diff Text, Copy Button and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For code-review tools, release notes that show a change and engineering blogs. The file names, counts and code are example data.

FAQ

How do I change the diff and the counts?

Edit FILES and DIFF_LINES at the top of the file. FILES lists each file's path with its added and removed counts, and the totals, the glyph and "across N files" are worked out from it. DIFF_LINES is the shown function's change, one string per line: a space for an unchanged line, "-" for a removed one, "+" for an added one. The hunk line of the patch is counted from those lines.

Why are there signs, and not red and green?

Every changed line carries a "-" or a "+", and a visually hidden "Removed" or "Added" for screen readers, because colour alone is not a signal. The block overrides the component's green and red with a faint foreground tint, so it reads the same in greyscale and in any theme. In the diffstat, a solid square is the share added and a hollow one the share removed, and the numbers are written beside them.

What does Copy patch copy?

A real unified diff: the two file header lines, a hunk line with the right line counts, and the same lines the window shows. The Copy button announces "Copied" politely. It copies the one function in the window, not all five files, and the caption under the window says so.

What moves, and what happens with reduced motion?

The header and band fade up once on load, and the diff plays once as the window scrolls into view: removed lines strike through, then added lines slide in. With reduced motion the entrance is off and the whole diff is simply there.

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

Long lines wrap inside the window, so nothing scrolls sideways, and the file chips wrap onto more rows. In a right-to-left layout the text around the window mirrors, while the code and the diff stay left to right, as code should.

  • Pro

    Diff Viewer Changelog

    Code and commits

    One config file's diff in a framed, focusable region, with Previous change and Next change buttons that move a ring from hunk to hunk and a live count.

  • Pro

    Breaking Changes Changelog

    APIs and integrations

    A framed table of four breaking calls: the old call in a del row, the new in an ins row, who it affects and the day to migrate by, with a codemod command in a terminal strip and a Copy button.

  • 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

    Schema Diff Changelog

    Data and config

    A migration viewer: a Select of three migrations and an Unified or Split toggle draw the columns that were added, changed or removed as a diff table with signs and words.

  • 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

    AI Commit Analyzer Changelog

    Code and commits

    A release's commits as one segmented bar by category with counts and shares, over a table of the five highest-impact commits with an impact meter, a risk word and a How it's scored popover.

All 200 changelog blocks