Skip to content

Code Block

Code the agent wrote, with lines that arrive in turn and a copy button that always works.

brew.tsTypeScript

export function brewRatio(coffeeGrams: number, strength = 16) {  const water = coffeeGrams * strength;  const bloom = coffeeGrams * 2;  return { water, bloom, pours: [bloom, water * 0.6, water] };} brewRatio(15); // { water: 240, bloom: 30, ... }

'use client';

import { useState } from 'react';
import { Button, CodeBlock } from '@brand-studio/ui';

const code = `export function brewRatio(coffeeGrams: number, strength = 16) {
  const water = coffeeGrams * strength;
  const bloom = coffeeGrams * 2;
  return { water, bloom, pours: [bloom, water * 0.6, water] };
}

brewRatio(15); // { water: 240, bloom: 30, ... }`;

export default function CodeBlockDemo() {
  const [run, setRun] = useState(0);
  return (
    <div style={{ width: '100%', maxWidth: 600, display: 'grid', gap: 12, justifyItems: 'end' }}>
      <div style={{ width: '100%' }}><CodeBlock key={run} code={code} filename="brew.ts" language="TypeScript" reveal lineNumbers /></div>
      <Button tone="secondary" onClick={() => setRun(value => value + 1)}>Replay</Button>
    </div>
  );
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, CodeBlock } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { CodeBlock } from '@brand-studio/ui';

<CodeBlock code={code} filename="brew.ts" language="TypeScript" reveal lineNumbers />

reveal brings the lines in one after another at linesPerSecond. To stream real output, pass the growing code without reveal; new lines appear as they arrive. Copy always takes the whole of code, even mid-stream. The block shows plain text and adds no syntax colouring.

Accessibility

The code area takes focus, so arrow keys scroll long lines.
The copy button says "Copied" in words, not only with a tick.
With reduced motion every line shows at once.

API Reference

Prop	Type	Default
`code`	`string`	–
`language?`	`string`	–
`filename?`	`string`	–
`reveal?`	`boolean`	`false`
`linesPerSecond?`	`number`	`24`
`lineNumbers?`	`boolean`	`false`
`copyLabel?`	`string`	`'Copy code'`
`className?`	`string`	`''`