A collapsible code diff with expandable unchanged lines, copy patch, and a Viewed toggle.
import FileDiff, { type DiffHunk } from '@/components/ui/file-diff'
const hunks: DiffHunk[] = [
{
id: 'imports',
header: '@@ -1,4 +1,5 @@',
lines: [
{ content: "import * as React from 'react'", oldNumber: 1, newNumber: 1, type: 'context' },
{
content: "import { MessageBubble } from './message-bubble'",
newNumber: 2,
type: 'addition',
},
{ content: "import { cn } from 'cn'", oldNumber: 2, newNumber: 3, type: 'context' },
],
},
{
id: 'render',
header: '@@ -12,4 +13,6 @@ function Message',
hidden: [
{ content: 'interface MessageProps {', oldNumber: 4, newNumber: 5, type: 'context' },
{ content: ' children: React.ReactNode', oldNumber: 5, newNumber: 6, type: 'context' },
{ content: '}', oldNumber: 6, newNumber: 7, type: 'context' },
],
lines: [
{
content: 'function Message({ children }: MessageProps) {',
oldNumber: 12,
newNumber: 13,
type: 'context',
},
{ content: ' return <div>{children}</div>', oldNumber: 13, type: 'deletion' },
{ content: ' return (', newNumber: 14, type: 'addition' },
{ content: ' <article className="group">', newNumber: 15, type: 'addition' },
{
content: ' <MessageBubble>{children}</MessageBubble>',
newNumber: 16,
type: 'addition',
},
{ content: ' </article>', newNumber: 17, type: 'addition' },
{ content: ' )', newNumber: 18, type: 'addition' },
{ content: '}', oldNumber: 14, newNumber: 19, type: 'context' },
],
},
]
export default function Demo() {
return (
<FileDiff className="w-full max-w-xl" filename="src/components/ai/message.tsx" hunks={hunks} />
)
}
Part of Pasta UI — browse the full library on 21st.dev.