# Diff row (goodtabs UI)

One line of a diff with old and new line numbers and a sign column.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/diff-row.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/diff-row`

## Usage

```tsx
import { DiffRow } from "@/components/ui/diff-row"

<DiffRow kind="add" newLine={13}>{"const gap = 12;"}</DiffRow>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| kind | `"add" | "remove" | "context"` | `"context"` | How the line changed. |
| oldLine | `number` |  | Line number in the old file. |
| newLine | `number` |  | Line number in the new file. |
| children | `ReactNode` |  | The code on that line, without the sign. |

## When to use

- Showing a code change in docs, release notes or review tools
- Before and after snippets

## When not to use

- Plain code listings: use a snippet card
- Word level or side by side diffs, which need more than rows

## Notes for agents

- This is a code view, so it uses the --code-* tokens: green for added lines, the comment tone for removed lines
- The sign column and a screen reader prefix carry the meaning, never colour alone
- Rows are min-w-max; wrap them in a box with overflow-x-auto and, if it scrolls, tabIndex 0, role region and an aria-label
- Whitespace is preserved, so pass indentation inside the string

Docs: https://ui.goodtabs.co/components/diff-row