❯
# edit-block
File edit block with line numbers and diff highlights. Long files start collapsed around the changed lines — use the chevron to expand the full diff.
──
examples
◆Editsrc/api/checkout.ts+3
8    throw new ValidationError("Total must be positive")
9  }
10 
11  const charge = await stripe.charges.create({
12    amount: total,
──
install
npx shadcn@latest add "https://www.terminal-kit.com/r/edit-block.json"
──
component api
EditBlock
PropTypeDefaultDescription
file *string—File path shown in the header.
code *string—File contents to render with line numbers.
actionstring"Edit"Action label in the header — e.g. Edit, Create.
startLinenumber1Line number for the first line of code.
highlightLinesnumber[]—Line numbers to highlight as changed.
removedEditBlockRemovedLine[]—Removed lines rendered inline in the diff view.
removedLinesnumber[]—Line numbers to render with removed-line styling.
addedCountnumber—Override the added-line count shown in the header.
removedCountnumber—Override the removed-line count shown in the header.
defaultExpandedbooleanfalseWhether the code block starts expanded.
collapsedMaxLinesnumber5Max visible lines when collapsed.
layout"auto" | "flat" | "compact" | "panel""auto"auto — flat on Claude, compact inline on grok, bordered panel on default.
classNamestring—Additional CSS classes.
...propsHTMLDivElement—Standard div props.