Adv UI

Code Block

Shows code or terminal commands in a monospace block with a copy button, and optionally a title, line numbers, marked lines and syntax colors.
Stable
Web
iOS
Android
@advui/core
Source
install.tsx
tsx
import { CodeBlock } from '@advui/core'

export function Install() {
  return <CodeBlock code="pnpm add @advui/core" />
}
JSX
<CodeBlock
  code="import { CodeBlock } from '@advui/core'

export function Install() {
  return <CodeBlock code="pnpm add @advui/core" />
}"
  width="100%"
  title="install.tsx"
  language="tsx"
/>
PropsOpen in Playground

Installation

pnpm
pnpm add @advui/core
npm
npm install @advui/core

Usage

import { CodeBlock } from '@advui/core'

<CodeBlock code="pnpm add @advui/core" />
<CodeBlock title="app/providers.tsx" language="tsx" code={source} lineNumbers />

Examples

Basic

A one-line command with its copy button.
pnpm add @advui/core @advui/icons

Title and language

A file name and language in the header, with the copy button.
app/providers.tsx
tsx
import { UniversalProvider } from '@advui/core'
import { config } from './tamagui.config'

export default function App({ children }) {
  return <UniversalProvider config={config}>{children}</UniversalProvider>
}

Line numbers and marked lines

Lines 4 and 5 are marked with a tint and a bar.
package.json
json
{
  "name": "clinic-app",
  "dependencies": {
    "@advui/core": "^0.14.0",
    "@advui/icons": "^0.14.0"
  }
}

Syntax colors

Tokens from a highlighter, here written by hand in theme colors.
ts
// Greets the signed-in user
export function greet(name: string) {
  return `Hello, ${name}!`
}

Long lines

A command that scrolls sideways, the same command wrapped, and a log that scrolls within 192px.
bash
curl --request POST https://api.example.org/v1/clinics/42/reports --header "Authorization: Bearer $TOKEN" --header "Content-Type: application/json" --data @report.json --retry 3
bash
curl --request POST https://api.example.org/v1/clinics/42/reports --header "Authorization: Bearer $TOKEN" --header "Content-Type: application/json" --data @report.json --retry 3
sync.log
[08:00] sync: uploaded batch 1 of 24
[08:02] sync: uploaded batch 2 of 24
[08:04] sync: uploaded batch 3 of 24
[08:06] sync: uploaded batch 4 of 24
[08:08] sync: uploaded batch 5 of 24
[08:10] sync: uploaded batch 6 of 24
[08:12] sync: uploaded batch 7 of 24
[08:14] sync: uploaded batch 8 of 24
[08:16] sync: uploaded batch 9 of 24
[08:18] sync: uploaded batch 10 of 24
[08:20] sync: uploaded batch 11 of 24
[08:22] sync: uploaded batch 12 of 24
[08:24] sync: uploaded batch 13 of 24
[08:26] sync: uploaded batch 14 of 24
[08:28] sync: uploaded batch 15 of 24
[08:30] sync: uploaded batch 16 of 24
[08:32] sync: uploaded batch 17 of 24
[08:34] sync: uploaded batch 18 of 24
[08:36] sync: uploaded batch 19 of 24
[08:38] sync: uploaded batch 20 of 24
[08:40] sync: uploaded batch 21 of 24
[08:42] sync: uploaded batch 22 of 24
[08:44] sync: uploaded batch 23 of 24
[08:46] sync: uploaded batch 24 of 24

API reference

CodeBlock

A bordered block on `muted`. With a `title` or `language` it has a header with the copy button; without, the button sits at the top right. Layout and box props go to the block.
PropTypeDefaultDescription
code requiredstring—The code, as the copy button copies it. One final newline is not shown.
languagestring—Shown in the header, e.g. `tsx` or `bash`. It does not color the code.
titlestring—A file name or caption in the header. It also names the code for screen readers.
tokensCodeToken[][]—The same code as lines of `{ content, color?, italic?, bold? }`, from your highlighter. From Shiki’s `codeToTokensBase`: `({ content, color, fontStyle = 0 }) => ({ content, color, italic: (fontStyle & 1) > 0, bold: (fontStyle & 2) > 0 })`. Theme colors (`infoSoftForeground`) follow dark mode; check a highlighter theme’s contrast on `muted`.
lineNumbersbooleanfalseNumbers each line. The numbers are not selected or read aloud.
firstLineNumbernumber1The first line’s number, for an excerpt of a longer file.
highlightLinesnumber[]—Line numbers to mark with a tint and a bar, counting from `firstLineNumber`. Say why in the text around it too: screen readers do not hear the mark.
wrapbooleanfalseWraps long lines. Without it they scroll sideways.
maxHeightSizeTokens | number—Scrolls the code beyond this height; the header stays in place.
copyablebooleantrueShows the copy button.
onCopy(code: string) => void—Called with the code once it is copied.
labelsPartial<CodeBlockLabels>—`code` (names the code without a title, “Code”), `copy` (“Copy code”), `copied` and `failed`, for translation.

Accessibility

  • On web the code is a <pre><code> that takes focus (Tab), so keyboard users can scroll it with the arrow keys. It is a group named by title, or “Code” (labels.code).
  • The copy button is named “Copy code” and announces “Copied”, as in Copy Button.
  • Line numbers are hidden from screen readers and from selection, so selected code copies as written. Marked lines are a visual cue only.
  • On iOS and Android each line is read on its own, and long lines scroll sideways in a scroll view.
Keyboard interactions
KeyAction
TabMoves to the copy button, then to the code (web).
Arrow keysScroll the focused code (web).

Platform notes

Web
Long lines scroll sideways inside the block; maxHeight scrolls both ways in one box.
iOS
Lines are selectable text. Copying needs setClipboard (see Copy Button).
Android
Lines are selectable text. Copying needs setClipboard (see Copy Button). The code scrolls inside a scrolling screen (nestedScrollEnabled).

Related components

Copy Button
Typography
Scroll Area
Since v0.14.0Last updated Nov 2, 2026Edit this page on GitHub
PreviousChip
NextCollapsible