PrimitivesCodeBlock

Code Block

Syntax-aware code surface with language label, optional line numbers, and copy-to-clipboard.

CodeBlock ships with a full API table, a copyable example, and accessibility notes.

tsx

typescript

1function greet(name: string) {
2  return `Hello, ${name}!`;
3}

Installation

Install the package once, then import CodeBlock from its direct entry point or from the root.

bash

pnpm add @agent-ui/react

tsx

import { CodeBlock } from "@agent-ui/react/code-block";

Tailwind CSS v4 users: add @source "../node_modules/@agent-ui/react/src" to the global stylesheet so the library utilities are generated.

Usage

The example below is the same code that renders the preview. Copy it, swap in your own handlers, and ship.

tsx

1import { CodeBlock } from "@agent-ui/react";
2 
3<CodeBlock language="tsx" code={source} showLineNumbers />

API reference

Every prop CodeBlock accepts, its type, default, and behaviour.

API reference for this component
Name	Type	Default	Description
code	string	—	Source text.
language	string	—	Language label and highlight rules (ts, tsx, bash, css, python).
showLineNumbers	boolean	false	Adds a gutter with line numbers.
className	string	—	Inherits every native div attribute, including id, aria-, data-, onClick, and style.

Accessibility

The region is labelled by language and the copy control reports Copied in a live region.

Use it with the rest of the library

CodeBlock composes with MessageList, ChatShell, useChat, and the provider compose blocks. Browse the full reference or see all components in the gallery.

3 lines · copy-ready