Edit Block - terminal-kit

cat components/edit-block.tsx

❯

# 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,

──

component api

EditBlock

Prop	Type	Default	Description
file *	string	—	File path shown in the header.
code *	string	—	File contents to render with line numbers.
action	string	"Edit"	Action label in the header — e.g. Edit, Create.
startLine	number	1	Line number for the first line of code.
highlightLines	number[]	—	Line numbers to highlight as changed.
removed	EditBlockRemovedLine[]	—	Removed lines rendered inline in the diff view.
removedLines	number[]	—	Line numbers to render with removed-line styling.
addedCount	number	—	Override the added-line count shown in the header.
removedCount	number	—	Override the removed-line count shown in the header.
defaultExpanded	boolean	false	Whether the code block starts expanded.
collapsedMaxLines	number	5	Max visible lines when collapsed.
className	string	—	Additional CSS classes.
...props	HTMLDivElement	—	Standard div props.

──

install

npx shadcn@latest add "https://www.terminal-kit.com/r/edit-block.json"