CodeBlock
Syntax-highlighted code display with single-file and multi-tab modes, copy button, line highlighting, and collapsible long blocks — always rendered in a dark palette.
Playground
Installation
pnpm add @tessinaui/ui react-syntax-highlighter @types/react-syntax-highlighterUsage
import { CodeBlock } from "@tessinaui/ui";<CodeBlock
language="typescript"
filename="utils.ts"
code={`export const add = (a: number, b: number) => a + b;`}
/>Showcase
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
| Value | Font size | Padding |
|---|---|---|
"sm" | 0.72 rem | 0.625 × 0.875 rem |
"md" (default) | 0.8125 rem | 0.875 × 1.125 rem |
"lg" | 0.875 rem | 1.125 × 1.375 rem |
Rounded
| Value | CSS |
|---|---|
"none" | rounded-none |
"sm" | rounded-sm |
"md" | rounded-md |
"lg" (default) | rounded-lg |
"xl" | rounded-xl |
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
| Prop | Type | Default | Description |
|---|---|---|---|
code | string | — | Code string — single-file mode |
language | string | — | Prism language identifier |
filename | string | — | Shown in the header; when omitted the language badge is used |
highlightLines | number[] | [] | 1-indexed line numbers to highlight |
tabs | CodeBlockTab[] | — | Multi-tab mode — replaces code, language, filename |
size | "sm" | "md" | "lg" | "md" | Font size and padding |
rounded | "none" | "sm" | "md" | "lg" | "xl" | "lg" | Corner radius |
showLineNumbers | boolean | false | Renders the line-number gutter |
showDots | boolean | true | Show/hide the traffic-light dot cluster in the header |
showLangBadge | boolean | true | Show/hide the language badge when no filename is set |
onClose | () => void | — | Red dot click handler — upgrades it to an interactive button with an × icon on hover |
onMinimize | () => void | — | Yellow dot click handler — upgrades it to an interactive button with a − icon on hover |
onExpand | () => void | — | Green dot click handler — upgrades it to an interactive button with a ⤢ icon on hover |
maxHeight | string | number | — | Caps block height and adds an expand/collapse toggle |
defaultCollapsed | boolean | true | Initial collapsed state when maxHeight is set |
collapsed | boolean | — | Controlled collapsed state |
onCollapsedChange | (collapsed: boolean) => void | — | Fires when the expand/collapse button is clicked |
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
}PromptInput
AI chat input with auto-grow textarea, send/stop swap, a "+" options menu, model selector, suggestion chips, drag-drop attachments, voice controls, inline & stacked layouts, RTL and a loading skeleton.
Modal
An accessible dialog overlay built on Base UI. Compound component pattern with Header, Body, Footer, Title, Description, and Close. Five sizes. Five corner-rounding options. LTR and RTL support.