Diff Approval Block

Installation

pnpm dlx shadcn@latest add @cleverui/diff-approval-block

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { DiffApprovalBlock } from '@/components/ui/diff-approval-block'

Exampletsx

'use client'

import { useCallback, useState } from 'react'
import {
  DiffApprovalBlock,
  type DiffHunk,
  type DiffHunkState,
} from '@/components/ui/diff-approval-block'

const INITIAL_HUNKS: DiffHunk[] = [
  {
    id: 'h1',
    header: '@@ -12,6 +12,8 @@ rules:',
    lines: [
      { kind: 'context', text: '  - name: auto-refund' },
      { kind: 'context', text: '    match:' },
      { kind: 'removed', text: '      max_amount: 250' },
      { kind: 'added', text: '      max_amount: 500' },
      { kind: 'added', text: '      currency: USD' },
      { kind: 'context', text: '    action: propose_refund' },
    ],
  },
  {
    id: 'h2',
    header: '@@ -41,4 +43,7 @@ gates:',
    lines: [
      { kind: 'context', text: '  controller_approval:' },
      { kind: 'removed', text: '    threshold: 1000' },
      { kind: 'added', text: '    threshold: 500' },
      { kind: 'added', text: '    notify: finance-ops@meridian.io' },
      { kind: 'added', text: '    escalate_after: 4h' },
      { kind: 'context', text: '  ledger: xero' },
    ],
  },
  {
    id: 'h3',
    header: '@@ -88,3 +93,5 @@ metadata:',
    lines: [
      { kind: 'context', text: '  agent: meridian-ops' },
      { kind: 'added', text: '  change_ticket: FIN-4412' },
      { kind: 'added', text: '  proposed_by: billing-close-pack' },
      { kind: 'context', text: '  version: 3' },
    ],
  },
]

export default function DiffApprovalBlockDemo() {
  const [hunks, setHunks] = useState<DiffHunk[]>(INITIAL_HUNKS)

  const setState = useCallback((id: string, state: DiffHunkState) => {
    // brief beat so the press settles before the receipt
    window.setTimeout(() => {
      setHunks((prev) =>
        prev.map((h) => (h.id === id ? { ...h, state } : h))
      )
    }, 220)
  }, [])

  const allResolved = hunks.every((h) => (h.state ?? 'pending') !== 'pending')

  return (
    <div className="mx-auto flex min-h-[560px] w-full max-w-2xl flex-col justify-center px-4 py-12 sm:px-6 sm:py-16">
      <DiffApprovalBlock
        file="config/billing-rules.yaml"
        label="Proposed change"
        hunks={hunks}
        onApprove={(id) => setState(id, 'approved')}
        onReject={(id) => setState(id, 'rejected')}
      />
      {allResolved && (
        <button
          type="button"
          onClick={() => setHunks(INITIAL_HUNKS.map((h) => ({ ...h, state: 'pending' })))}
          className="mt-6 self-center font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground underline-offset-4 transition-colors hover:text-foreground hover:underline focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-hidden"
        >
          Reset demo
        </button>
      )}
    </div>
  )
}

API reference

DiffApprovalBlock accepts the following props.

Prop	Type	Default	Description
`file`*	`string`	–	mono file path in the header, e.g. 'config/billing-rules.yaml'
`hunks`*	`DiffHunk[]`	–	proposed hunks; resolution is fully prop-driven, buttons only fire callbacks
`onApprove`	`(id: string) => void`	–	fires from a hunk's approve button or the A key on the focused hunk
`onReject`	`(id: string) => void`	–	fires from a hunk's reject button or the R key on the focused hunk
`label`	`string`	`'Proposed change'`	mono micro-label above the file header

…plus everything from Omit< React.HTMLAttributes<HTMLElement>, 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' >: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface DiffHunk {
  id: string
  header?: string
  lines: DiffLine[]
  state?: DiffHunkState
}

export interface DiffLine {
  kind: DiffLineKind
  text: string
}

export type DiffHunkState = 'pending' | 'approved' | 'rejected'

export type DiffLineKind = 'context' | 'added' | 'removed'

Related components

HITL Approval Card

Human-in-the-loop approval for a pending agent action, plain-language summary, honest risk chip, expandable raw-payload mono block, and allow-once / always-allow / deny callbacks.

Agent Status Strip

A slim strip for app headers, agent name, state lamp, a one-line current step that shimmers while running, and an SSR-safe elapsed mono timer that starts post-mount.

AI Empty State

Agent session zero state for React AI apps, starter prompt cards, connected-tool chips, and an honest scope note, styled with Tailwind hairline restraint; composes above any composer.

Citation Rail

Inline numbered source chips paired with a rail of sources, favicon placeholder, domain, and title, plus a keyboard-accessible snippet peek on hover or focus.

Context Meter

Context-window usage meter, a hairline bar with a tabular tokens-used/limit readout and per-source breakdown rows, shifting to an honest warning treatment at 85 percent.

Generative Skeleton

A streaming placeholder that morphs, shimmering blocks resize and settle into real headings, rows, and cards as each section's content lands, so the answer arrives without a layout jump.

Frequently asked questions

How do I install the Diff Approval Block component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/diff-approval-block`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Diff Approval Block require?

Diff Approval Block uses motion and lucide-react on top of React and Tailwind CSS. You don't need to install them manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Diff Approval Block to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code