Compact code change view with old and new line numbers and live change counts for coding agents.
import FileDiff from '@/components/ui/file-diff'
export default function Demo() {
return (
<FileDiff
className="w-full max-w-xl"
filename="src/components/ai/tool-result.tsx"
lines={[
{
content: 'function Message({ children }) {',
oldNumber: 12,
newNumber: 12,
type: 'context',
},
{ content: ' return <div>{children}</div>', oldNumber: 13, type: 'deletion' },
{ content: ' return <article className="group">', newNumber: 13, type: 'addition' },
{
content: ' <MessageBubble>{children}</MessageBubble>',
newNumber: 14,
type: 'addition',
},
{ content: ' </article>', newNumber: 15, type: 'addition' },
{ content: '}', oldNumber: 14, newNumber: 16, type: 'context' },
]}
/>
)
}
Part of Pasta UI — browse the full library on 21st.dev.