Code Block

Displays code, terminal output, logs, and diffs, with optional syntax highlighting.

Powered by

Shadcn UIShiki

Installation

npx shadcn@latest add @redpanda/code-block

pnpm dlx shadcn@latest add @redpanda/code-block

yarn dlx shadcn@latest add @redpanda/code-block

bunx shadcn@latest add @redpanda/code-block

nubx shadcn@latest add @redpanda/code-block

aube dlx shadcn@latest add @redpanda/code-block

The install brings the useHighlightedCode hook and the highlighter library with it. Highlighting is optional: a block renders any string you give it.

Usage

import {  CodeBlock,  CodeBlockActions,  CodeBlockContent,  CodeBlockCopyButton,  CodeBlockHeader,  CodeBlockTitle,} from '@/components/redpanda-ui/components/code-block';

<CodeBlock>  <CodeBlockHeader>    <CodeBlockTitle>Terminal</CodeBlockTitle>    <CodeBlockActions>      <CodeBlockCopyButton value="rpk topic list" />    </CodeBlockActions>  </CodeBlockHeader>  <CodeBlockContent>rpk topic list</CodeBlockContent></CodeBlock>

For a block built from one string, use SimpleCodeBlock.

Anatomy

CodeBlock├── CodeBlockHeader│   ├── CodeBlockTitle│   └── CodeBlockActions│       ├── CodeBlockWrapButton│       └── CodeBlockCopyButton├── CodeBlockContent│   └── CodeBlockLines (or CodeBlockLine)└── CodeBlockFooter

Without a header, CodeBlockActions floats over the top end corner of the block. Its default visibility="hover" reveals controls on pointer hover, keyboard focus, or coarse-pointer devices. Use visibility="always" for persistent floating controls; SimpleCodeBlock selects this recipe when it has no title. Copy errors remain visible until the next attempt in either mode.

When to use

• Use CodeBlock for code, commands, configuration, logs, stack traces, and diffs that people read and copy.
• Use Code Tabs for the same snippet in several package managers or languages.
• Use Code Editor when people edit the code.
• Use an inline <code> for a name or a short command inside a sentence.

Syntax highlighting

CodeBlockLines turns a string into CodeBlockLines, highlighted when you give it a language:

<CodeBlock>  <CodeBlockContent>    <CodeBlockLines code={code} language="ts" />  </CodeBlockContent></CodeBlock>

It keys each line by where it starts in the code, so a finished line keeps its node while code streams in, and no call site needs an index key. To render the lines yourself, call useHighlightedCode(code, language), which returns one React node per line, and put each one in a CodeBlockLine.

• Languages load on first use. The list lives in lib/highlighter: bash, css, diff, go, html, java, javascript, json, jsx, log, markdown, powershell, protobuf, python, rust, sql, toml, tsx, typescript, and yaml, plus aliases such as ts, js, sh, yml, rs, and proto. A language-* class from a Markdown fence works too. Add a language by adding one line to that list.
• An unlisted language renders as plain text, with no highlighter loaded for it.
• "ansi" renders terminal colours from ANSI escape codes. Colours do not carry across lines.
• Streaming is cheap. As code arrives, only the new lines are tokenized, and finished lines keep their nodes.
• On the server, await highlightCode(code, language) from @/lib/highlighter returns the same lines and keeps Shiki out of the client bundle.

Highlighting runs Shiki on its JavaScript regex engine, so no WASM loads. Shiki’s core, engine, themes, and grammars load with the first block that highlights. Tokens use github-light-high-contrast and github-dark-default; the theme’s code-token utility selects the palette for the surrounding surface, including terminal blocks.

Examples

Simple code block

SimpleCodeBlock builds the whole block from one string: highlighting, a header when there is a title, and wrap and copy buttons. Without a title, the buttons float over the block and stay visible, as the copy button did before the parts. wrap sets whether lines start wrapped, and allowWrap={false} hides the wrap toggle.

<SimpleCodeBlock code={query} language="sql" lineNumbers title="top-customers.sql" />

Floating actions

Without a header, the actions appear on hover or focus, and stay shown on touch screens.

Plain

Line numbers

lineNumbers numbers each CodeBlockLine, and startLine sets the first number. Numbers are a CSS counter, so they are never part of copied or selected text, and screen readers skip them. Put a string’s lines in with CodeBlockLines: unlike Shadcn UI’s block, CodeBlockContent does not split a string child itself.

Diff and highlighted lines

Set variant on a line to added, removed, or highlighted, or give CodeBlockLines a variants map by line number. Added and removed lines carry a + or − marker, so the change never depends on colour alone.

<CodeBlockLines code={code} language="ts" variants={{ 2: 'removed', 3: 'added' }} />

Wrap

wrap wraps long lines instead of scrolling them. CodeBlockWrapButton is the toggle for it, a Button with aria-pressed. It changes the display only: copying keeps the source’s own line breaks.

Show more

Cap the content with a max-h-* class, and toggle it from a Button in CodeBlockFooter. Give the button aria-expanded, and point its aria-controls at the content’s id.

Terminal

variant="terminal" keeps the block dark in both app themes. It sets data-theme="dark" on the block, so its tokens and highlighting both resolve to the dark theme. Pair it with size="sm" and the "ansi" language for command output.

Destructive

variant="destructive" is for errors and failed commands.

Redpanda examples

Client languages

The same order produced to the orders topic from Go (franz-go), Python (confluent-kafka), Java, TypeScript (KafkaJS), and Rust (rdkafka). For the same step in several languages, put one block per language in a TabsContent.

Schema Registry

A topic’s value schema in Protobuf and Avro, with line numbers, and the rpk registry commands that register it in a terminal block.

Redpanda Connect

A pipeline that reads orders, enriches each record with a Bloblang mapping, and writes orders-enriched. The mapping lines are highlighted through CodeBlockLines variants.

rpk

A session that points rpk at a local cluster, then creates, produces to, and consumes from a topic.

Accessibility

• CodeBlockContent renders a pre with a code element, always left to right, while the header follows the page direction.
• The content takes focus while it scrolls, so keyboard users can scroll a long line or a capped block. A block that fits is not a tab stop, so a page of short commands is not a page of tab stops. Pass tabIndex to decide yourself.
• Floating actions show on focus as well as hover.
• CodeBlockCopyButton keeps the name “Copy”, and a status region announces “Copied”. The result is announced once, not again by a renamed button.
• While the write is pending, the button stays focused but ignores clicks. When the clipboard refuses the write, an alert reads “Could not copy code. Try again.” and stays, on a row of its own that fits a narrow block, until the next try succeeds.
• Line numbers are hidden from screen readers, and diff markers back up their colour.

API reference

CodeBlock

Also takes every div prop.

CodeBlockCopyButton

Also takes every Button prop. It is a ghost icon-xs button by default.

CodeBlockWrapButton

Also takes every Button prop. It is a ghost icon-xs button by default.

CodeBlockContent

Also takes every pre prop. Cap its height with a max-h-* class.

CodeBlockLines

CodeBlockLine

Also takes every span prop. An empty line keeps a newline, so a copied selection keeps blank lines.

CodeBlockHeader, CodeBlockTitle, CodeBlockActions, and CodeBlockFooter take every div prop. CodeBlockTitle truncates, and sizes an icon placed before the text. CodeBlockActions also accepts visibility="hover" | "always" (default: "hover").

SimpleCodeBlock

Migrating from the previous CodeBlock

CodeBlock is now a set of parts, matching Shadcn UI’s code block. SimpleCodeBlock keeps its props, so most call sites need no change. They gain syntax highlighting and a wrap toggle, which allowWrap={false} hides.

Migrating from Code Block (Dynamic)

Code Block (Dynamic) was removed in this breaking release. Use this component instead.

Credits

• Based on the Shadcn UI Code Block component and its useHighlightedCode hook.