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;`}
/>

Examples

Default

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

Multi-tab

Provide tabs to switch between multiple files, each with its own language and copy state.

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.

Sizes

Three sizes — sm, md, and lg — control font size and padding.

Loading

CodeBlockSkeleton renders a placeholder while code is being fetched.

Modes

Single file

Provide code + language. filename is optional — when omitted the language badge is shown in its place.

<CodeBlock
  language="typescript"
  filename="use-toggle.ts"
  code={code}
/>

Multi-tab

Provide tabs instead of code/language/filename. A tab bar replaces the header. Each tab has its own copy button state.

<CodeBlock
  tabs={[
    { name: "index.ts",   language: "typescript", code: tsCode },
    { name: "styles.css", language: "css",        code: cssCode },
  ]}
/>

Line highlighting

Pass a 1-indexed array of line numbers to highlightLines. Combine with showLineNumbers for the best visual clarity.

<CodeBlock
  language="typescript"
  code={code}
  highlightLines={[1, 4, 5, 6, 7]}
  showLineNumbers
/>

Collapsible

Set maxHeight (px number or CSS string) to cap the block height and reveal an expand/collapse toggle. The block starts collapsed by default — pass defaultCollapsed={false} to start expanded.

<CodeBlock
  language="typescript"
  code={longCode}
  maxHeight={200}
  defaultCollapsed
/>

Control the collapsed state externally:

const [collapsed, setCollapsed] = React.useState(true);

<CodeBlock
  language="typescript"
  code={longCode}
  maxHeight={200}
  collapsed={collapsed}
  onCollapsedChange={setCollapsed}
/>

Size

Rounded

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

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
}