Search

Search components and blocks

Sign in

Inline Diff

Shows an agent's proposed code change as a colored inline diff — added and removed lines stagger in on mount, syntax highlighting comes from the shared Shiki highlighter, and Accept/Reject controls resolve the diff with an animated state change.

pnpm dlx shadcn@latest add @ditherui/agent-inline-diff
TSsrc/lib/format-price.ts+5-1
export function formatPrice(cents: number) {
  return `$${(cents / 100).toFixed(2)}`
  const value = (cents / 100).toFixed(2)
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
  }).format(Number(value))
}

Install

$ pnpm dlx shadcn@latest add @ditherui/agent-inline-diff

Props

linesDiffLine[]—
langstring"tsx"
filenamestring—
classNamestring—

When to use the agent inline diff

Use the inline diff when an agent proposes a code change and a person should accept or reject it. Added and removed lines stagger in with syntax highlighting.

  • Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components