Xzero UI
Pro library
Special componentsCode suggestion

Code suggestionPro

An AI code edit suggestion where the model's proposed changes stream into a small editor panel as inline diff hunks, and you accept or reject each one, or all at once with Cmd+Enter. Accepted hunks fold into the file with a smooth height change.

$ pnpm dlx shadcn@4.23.0 add @xzero-ui-pro/code-suggestion
Live · keyboard ready

When to use

When not to use

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/code-suggestion

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { CodeSuggestion, type CodeSuggestionHunk } from "@/components/xzero/code-suggestion/code-suggestion";
import { ClaudeMark } from "@/components/xzero/code-suggestion/code-suggestion-marks";

const hunks: CodeSuggestionHunk[] = [
  { id: "timeout", start: 2, remove: 1, summary: "Add a 10s timeout", insert: [
    "  const res = await fetch(url, { signal: AbortSignal.timeout(10_000) });",
  ] },
];

export function InlineEdit({ file, onSave }: { file: { name: string; text: string }; onSave: (text: string) => void }) {
  return (
    <CodeSuggestion
      code={file.text}
      hunks={hunks}
      fileName={file.name}
      instruction="Time out slow requests"
      model={{ name: "Claude Opus 5.5", mark: <ClaudeMark aria-hidden style={{ color: "#D97757" }} /> }}
      onResolve={({ code }) => onSave(code)}
    />
  );
}

API reference

CodeSuggestion

An AI code edit suggestion in a small editor panel, like an inline edit in Cursor or GitHub Copilot. The header shows the model mark, the instruction and the model; the panel shows a file tab with its language mark, a running +/− count and the code with each proposed change as an inline diff hunk: removed lines tinted red with a minus, new lines tinted green with a plus. New lines stream in, then every hunk gets Reject and Accept under it, and the footer offers Reject all and Accept all (Cmd or Ctrl + Enter). Accepting a hunk folds its removed lines away and settles the new lines into the file; rejecting folds the new lines away and restores the original. With no props it plays a simulated suggestion on a sample billing helper (Add retry with backoff, Claude Sonnet 5.5) that reviews itself and replays until someone touches it; pass code and hunks to show a real one.

PropTypeDefaultDescription
codestringsample fetch-invoice.tsThe original file contents, lines split on \n.
hunksCodeSuggestionHunk[]–The proposed changes. Each is { id, start, remove?, insert?, summary? }: it replaces remove lines starting at the zero based line start with the insert lines (remove 0 inserts before start, an empty insert deletes). Overlapping hunks after the first are ignored. Leave it unset to play the built-in simulated suggestion.
status"thinking" | "streaming" | "ready" | "error""ready"Controlled status when you pass hunks. thinking shows a shimmer label over the plain file; streaming shows hunks as they grow (append lines to insert and they fade in); ready shows Accept and Reject; error shows the error message and Retry. Going back to thinking clears earlier decisions.
instructionstring"Add retry with backoff"What the person asked for, shown as the header title.
model{ name: string; mark?: ReactNode } | nullClaude Sonnet 5.5 with the Claude markThe model that wrote the suggestion. Mono marks take the text color; pass style={{ color }} for the brand color. null hides the model line.
fileNamestring"fetch-invoice.ts"File name in the tab.
filePathstring"src/billing" for the sampleFolder shown after the file name from a 520px card.
fileMarkReactNode | nullTypeScript markLanguage mark in the tab. null hides it.
errorstring"The model stopped responding. Nothing was changed."Message for the error status.
onDecision(hunk: CodeSuggestionHunk, decision: "accepted" | "rejected", code: string) => void–Called for every hunk accepted or rejected (Accept all calls it once per hunk), with the file as it now stands: accepted hunks applied, the rest original.
onResolve(result: { code: string; accepted: string[]; rejected: string[] }) => void–Called once every hunk has a decision, with the final code and the hunk ids. Write the file here.
onStop() => void–Shows Stop while thinking or streaming. Abort your request here. The simulated suggestion stops on its own and keeps only the hunks it finished.
onRegenerate() => void–Shows Regenerate once the review is done (or there were no changes) and Retry on error. The simulated suggestion replays on its own.
autoPlaybooleantrueSimulated suggestion only: after streaming it accepts and rejects hunks on its own (alternating one by one and Accept all) and replays about 2.6s after it finishes. Any pointer, key or focus inside the card hands control to the person for that run. Off under reduced motion.
shortcutsbooleantrueCmd or Ctrl + Enter accepts all and Cmd or Ctrl + Backspace rejects all while focus is inside the card. Accept all shows the hint.
maxCodeHeightnumber–Caps the code area height in pixels; longer files scroll inside it.
classNamestring–Class on the root element.
styleCSSProperties–Inline style on the root.

Keyboard interactions

KeysAction
TabMoves to the code area (scrollable, and where the shortcuts work), then each hunk's Reject and Accept, then the footer actions.
Enter / SpacePresses the focused Accept, Reject, Accept all, Reject all, Stop or Regenerate. After a hunk is decided, focus moves to the next pending hunk's Accept, or to the code area when none are left.
Cmd / Ctrl + EnterAccepts every pending hunk while focus is inside the card.
Cmd / Ctrl + BackspaceRejects every pending hunk while focus is inside the card.
Arrow left / Arrow rightScrolls long lines when the code area has focus.

Accessibility

Motion

Responsive behavior

Performance

Notes for AI

Also in ai

Guidance for AI tools

Code suggestion: An AI code edit suggestion where the model's proposed changes stream into a small editor panel as inline diff hunks, and you accept or reject each one, or all at once with Cmd+Enter. Accepted hunks fold into the file with a smooth height change. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt

Browse all components