Inline Diff
ProA code change streaming in the way an agent writes it: removed lines strike through first, each block of additions develops in from a blur top to bottom, unchanged context folds away, and Accept or Reject collapses the losing side out of the block.
The three queries after the user lookup don't depend on each other, so I'll run them together.
Installation
npx shadcn add @useplanes/inline-diff
Unlock with Planes Pro
$99 once · 80 Pro components · lifetime updates.
<InlineDiff
fileName="app/dashboard/page.tsx"
before={original}
after={edited}
onAccept={applyEdit}
onReject={discardEdit}
/>Examples
Static patch
Turn off autoPlay and hide the actions to show a finished change.
<InlineDiff before={a} after={b} fileName="config.ts" autoPlay={false} showActions={false} />Own the decision
Control decision when the accept happens elsewhere, like a toolbar for the whole file set.
<InlineDiff before={a} after={b} decision={applied ? "accepted" : "pending"} showActions={false} />Use cases
Coding agents
Show the edit an assistant is making as it writes it, with the user deciding at the end.
AI rewrite suggestions
Prose, config or SQL changes proposed by a model, reviewed line by line.
Pull request summaries
A compact, animated patch for release notes or changelog pages.
Migration previews
Show what a codemod will do to a file before the user runs it.
Related components
All AI components
Thinking Loader
An AI thinking pill that cycles through phase labels like Searching and Writing, then pops a check when it finishes.
AI Prompt Composer
An AI chat composer with an auto-growing input, a model picker, and a send button that turns into a stop button while a response streams.
Streaming Message
An assistant message that develops in like ink — a soft-feathered edge sweeps down the text with an iridescent glow riding the write-frontier, then copy, regenerate, and feedback actions fade in without shifting the layout.
Reasoning Trace
A collapsible thinking panel that streams reasoning steps one at a time, then folds down to a short summary you can reopen.
Tool Call Card
The inline row an agent leaves when it uses a tool: a mono call signature like read_file(page.tsx), the tool's glyph with a spinner that resolves into a drawn check, a note that shimmers while it runs, and a panel that unfolds to the arguments and result.
Agent Plan
A plan that behaves like an agent's plan: steps light up along a rail that fills as they finish, the active one breathes and shimmers its sub-status, failures insert recovery steps that slide the list apart, and the whole thing folds into one line when it's done.