Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Code Diff Changelog Block for Svelte

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 Svelte with Ark 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.

All 200 changelog blocks