Browse components

File Diff

Shiki-highlighted added and removed lines with live change counts.

Install

npx shadcn@latest add https://ui.anuragroy.dev/r/file-diff.json

Preview

Loading preview…

Installation

Add the component from this site. The shadcn CLI fetches the registry JSON over HTTPS — no named registry submission required.

Terminal

npx shadcn@latest add https://ui.anuragroy.dev/r/file-diff.json

GitHub fallback if the website is down:

Terminal

npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/file-diff.json

Usage

Import paths follow your components.json aliases. After install, the default path is @/components/ui/file-diff.

Import

import {  FileDiff,  FileDiffBody,  FileDiffFilename,  FileDiffHeader,  FileDiffLine,  FileDiffStats} from "@/components/ui/file-diff"

example.tsx

import {  FileDiff,  FileDiffBody,  FileDiffFilename,  FileDiffHeader,  FileDiffLine,  FileDiffStats,} from "@/components/ui/file-diff"export function Example() {  return (    <FileDiff lang="tsx">      <FileDiffHeader>        <FileDiffFilename>src/app-sidebar.tsx</FileDiffFilename>        <FileDiffStats additions={1} deletions={1} />      </FileDiffHeader>      <FileDiffBody>        <FileDiffLine type="removed" number={13}>          {'  return <nav className="w-72" />'}        </FileDiffLine>        <FileDiffLine type="added" number={13}>          {'  return <nav className="w-60" />'}        </FileDiffLine>      </FileDiffBody>    </FileDiff>  )}

API Reference

FileDiff

Prop	Type	Default
lang	string	—
filename	string	—

filename — Used to infer `lang` when it is omitted.

FileDiffLine

Prop	Type	Default
type	"context" \| "added" \| "removed"	—
number	number	—

FileDiffStats

Prop	Type	Default
additions	number	—
deletions	number	—