How do I install the code block?

Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Does it work with streamed output?

Yes. Streaming updates stay stable as new text arrives.

Yes. Focused lines are supported, along with line numbers.

A syntax-highlighted code surface with stable streaming updates, line numbers, focused lines, smooth following, and copy feedback.

pnpm dlx shadcn@latest add @ditherui/agent-code-block

TSXagent/greet.tsGenerating

$ pnpm dlx shadcn@latest add @ditherui/agent-code-block

PropTypeDefault

codestring—

langstring"tsx"

filenamestring—

focusedLinesnumber[]—

streamingbooleanfalse

classNamestring—

Use the code block to show code with highlighting. It handles streaming updates, line numbers, focused lines and copy feedback.

Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

export function formatPrice(cents: number) {
  return `$${(cents / 100).toFixed(2)}`
  return fmt.format(cents / 100)
}