Diff review — Björk UI

Components•Diff review

Diff review

Accept or reject an AI suggestion one change at a time. A line diff with word-level highlights, a resolved counter, keyboard review with j, k, a and r, and the merged text handed back when you finish.

Dependencies

Motion clsx tailwind-merge

Copy below cli

npx shadcn add @bjork-ui/diff-review

How to use

import { DiffReview, SAMPLE_DIFF } from "@/components/bjork-ui/ai/diff-review";export function Demo() {  return (    <DiffReview      filename={SAMPLE_DIFF.filename}      original={SAMPLE_DIFF.original}      suggestion={SAMPLE_DIFF.suggestion}      onComplete={(text, decisions) => save(text)}    />  );}

src/billing/plan-label.ts

+4 −5

0 of 3 resolved

export function planLabel(plan: Plan) {

Change 1−2 +2

if (plan.interval == "year") {

return plan.name + " (yearly)";

if (plan.interval === "year") {

return `${plan.name} (billed yearly)`;

}

return plan.name;

}

export function monthlyPrice(plan: Plan): number {

Change 2−2 +1

// TODO: handle yearly plans

return plan.price;

return plan.interval === "year" ? plan.price / 12 : plan.price;

}

export function priceLine(plan: Plan, locale: string) {

const amount = monthlyPrice(plan);

Change 3−1 +1

return formatPrice(amount, "USD") + " / month";

return `${formatPrice(amount, plan.currency, locale)} / month`;

}

Focus a change, then j / k to move, a / r to decide

Options