Agents
Code Block
Code in a reply: filename, line numbers, highlights, wrap and copy.
Code Block renders code inside an agent's reply: filename and language, line numbers, highlighted lines in the signal color, a soft-wrap toggle and copy. It bundles no highlighter, so it stays light.
Preview
billing/tax.tsts
1export function tax(i: Invoice) {2 if (!i.customer.taxId) return 03 return Math.round(i.subtotal * i.rate * 100) / 1004}5 6export function total(i: Invoice) {7 return i.subtotal + tax(i)8}Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/code-block.jsonThe CLI also installs the Cuelark theme tokens. With the @cuelark namespace configured, use @cuelark/code-block.
Usage
import { CodeBlock } from "@/components/ui/code-block";
<CodeBlock code={code} language="ts" filename="tax.ts" highlight={[2]} />API reference
CodeBlock
| Prop | Type | Default | Description |
|---|---|---|---|
| code | string | — | Source. |
| language · filename | string | — | Header. |
| highlight | number[] | — | Lines to mark. |
| showLineNumbers | boolean | true | Gutter. |
Accessibility
- Fully keyboard operable with visible focus.
- Live regions announce streaming updates politely.
FAQ
Also searched as: code block component react · copy code button · ai code snippet ui · line highlight code block · shadcn ai code block