DiffStat

Markdown

Lines added and removed for a change, with optional file count and blocks.

Use it for: Lines added and removed beside a task, commit or pull request.
Not for: The changes themselves. Try CodeDiff.

15 lines added, 4 removed

Installation

npm install @stackunseen/ui

import { DiffStat } from '@stackunseen/ui';

Styles: @stackunseen/ui/styles.css

Usage and props

Pass the counts your diff or code server reports. The signs are in the text, so it reads without color, and screen readers hear the counts in words.

Supported inputs

This is the public signature used by this example. Open Code to see how the values and callbacks fit together.

added · removed · files? · blocks? · native span props

How state and callbacks work

All props

Loading…

For your coding agent

Give the agent this page instead of a screenshot. The prompt wraps the page with the install and import lines and the rule that your server, not a click, completes an action.

Contract: added · removed · files? · blocks? · native span props
Keeps honest: Pass the counts your diff or code server reports. The signs are in the text, so it reads without color, and screen readers hear the counts in words.
MCP: read_component "DiffStat" on the docs endpoint

Open the Markdown file

Keyboard and customization

Keyboard

Inert content; it adds no tab stop.

Customization

Change shared colors, spacing, corners and icons with the theme. Use the component's supported props to adapt its content and layout. Customization guide and Theme Studio