CodeBlock

Playground

Installation

pnpm add @tessinaui/ui react-syntax-highlighter @types/react-syntax-highlighter

Usage

import { CodeBlock } from "@tessinaui/ui";

<CodeBlock
  language="typescript"
  filename="utils.ts"
  code={`export const add = (a: number, b: number) => a + b;`}
/>

When to use — and when not to

CodeBlock displays static code: a snippet in docs, an install command, an API example, a code answer in an AI chat. It highlights, copies, wraps, collapses and tabs between files, and it paints its own neutral plate so it reads on any surface.

• Live terminal / log streams — a scrolling console with timestamps and filters is a log viewer, not a code block. Render the stream in its own component.
• Diffs — added/removed rows with dual gutters and split/unified views are their own control; a CodeBlock shows a snapshot, not a change.
• Inline code inside a sentence — use a <code> element (or an inline Code component); CodeBlock is always a block.

Examples

Default

A single-file code block with a filename and copy button.

Command

Hide the header with showHeader={false} for a bare snippet — an install command or a one-liner — with the copy control floating over the code. This is the dominant shape in developer docs.

Multi-tab

Provide tabs to switch between multiple files, each with its own language and copy state. The tab bar is one keyboard tab stop; arrow keys move between files.

Package managers

The tabs pattern is how a docs page offers the same command for npm, pnpm, yarn and bun.

Line highlighting

Highlight specific lines with highlightLines, paired with showLineNumbers for clarity.

Collapsible

Cap the height with maxHeight to reveal an expand/collapse toggle for long blocks. showMoreLabel / showLessLabel relabel the toggle.

Wrap

By default a long line scrolls horizontally. Set showLineWrap to wrap it instead — useful for prose-like commands where horizontal scrolling hides the tail.

Sizes

Three sizes — sm, md, and lg — scale the whole block: code padding, the code type scale, and the chrome around it (header height, filename, copy control, tab bar, expand row). Type follows the shared data-display ladder, with the header one step below the code it labels.

Header actions

Pass any controls to headerActions — a download button, an "open in playground" link, a language Select — and they sit in the header before the copy button.

Theme

The plate is self-contained. theme="auto" (default) follows the page; theme="dark" or theme="light" locks it — the dark-code-on-a-light-docs-page convention.

Loading

CodeBlockSkeleton renders a placeholder that matches the block's box while code is being fetched.

Language identifiers

language accepts any identifier supported by Prism. Common values:

typescript · tsx · javascript · jsx · bash · shell · python · css · scss · json · yaml · markdown · html · sql · rust · go

Pass "text" or omit language in a tab to display plain text with no highlighting.

API Reference

CodeBlock

Either code + language (single-file) or tabs (multi-file) is required. The root forwards className and any other div attributes (data-*, id, aria-*).

CodeBlockSkeleton

Mirrors the block's box (§2b). Takes size, rounded, theme, plus lines (default 6), showHeader, showFilename, showLangBadge, showLineNumbers and maxHeight, and forwards className + div attributes.

CodeBlockTab

interface CodeBlockTab {
  name: string;              // Label shown in the tab button
  code: string;              // Code content for this tab
  language?: string;         // Prism language (defaults to "text")
  highlightLines?: number[]; // 1-indexed lines to highlight in this tab
}