---
title: "Code Block"
description: "A monospace preformatted block that colours its own source from a language name."
---

A monospace preformatted block for code inside a message. Hand it a `language` and the source, and the built-in scanner colours it — no highlighter, no grammar, no build step behind the component.

_Live example of Code Block — see the page for the rendered demo._

## What it colours [#languages]

Four colours means four answers, not a parse tree: **comment**, **string**, **keyword** and **call**. A scanner that small fits inside the component, which is the point — six lines of code in a chat message should not drag a highlighter in behind them.

`language` accepts `ts`, `tsx`, `js`, `jsx`, `json`, `bash` and `sh`. Anything it reads badly stays plain rather than wrong.

For a diff, a language not on that list, or semantic colours, produce the runs elsewhere and pass them as `tokens` — an array of `{ text, kind? }`, where a run without a `kind` is plain. `CodeToken` is still exported for markup placed by hand.

## Installation

```bash
npx newtui@latest add code-block
```

npm dependencies: class-variance-authority.

Files written — React: components/ui/code-block.tsx. Vue: components/ui/code-block/CodeBlock.vue, components/ui/code-block/CodeToken.vue, components/ui/code-block/index.ts.

## Usage

React:

```tsx
import { CodeBlock } from "@/components/ui/code-block"
```

Vue:

```ts
import { CodeBlock, CodeToken } from "@/components/ui/code-block"
```

## API reference

**`CodeBlock`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `language` | `"ts" \| "tsx" \| "js" \| "jsx" \| "json" \| "bash" \| "sh"` | — | Colours the source with the built-in scanner. Omit it and nothing is coloured. |
| `code` | `string` | — | The source to colour. In React the same string can be passed as the only child; in Vue this prop is the way, since a template collapses the newlines out of slot text. |
| `tokens` | `{ text: string; kind?: CodeTokenKind }[]` | — | Runs from a real highlighter, for what the scanner cannot read. A run without a kind is plain. |
| `children / default slot` | `React.ReactNode / Vue slot` | — | With a language, the source itself (React). Without one, CodeToken children placed by hand. |
| `className / class` | `string` | — | Additional classes merged with the component defaults. |

The registry exports `CodeBlock`, `CodeToken` and `tokenizeCode`, the scanner itself, for anything that wants the runs without the markup. Parts without a table accept the native attributes for the element they render; React uses `className`, while Vue uses `class` and fallthrough attributes.

## Accessibility

Preserve the native semantics of the rendered elements and pass through ARIA attributes when the surrounding context needs a label or description. Any interactive child needs a visible focus indicator, and meaning must not rely on colour alone.

## Tokens

Code Block reads its colours, radii and motion from the `--newt-*` tokens. Override a token rather than editing the component.