CodeBlock

Highlighted code with a file name, a copy button, and language tabs.

import { CodeBlock } from 'components/UI/CodeBlock'

A file

The header shows the file name, language, and copy action.

analytics.tsTypeScript

import posthog from 'posthog-js'posthog.capture('signup_completed', {    plan: 'team',    source: 'pricing',})

Multiple files

One tab per file. Set defaultValue to choose the first selected file.

import posthog from 'posthog-js'export function captureExport(reportId: string) {    posthog.capture('report_exported', {        report_id: reportId,        format: 'csv',    })}

Languages

Use arrow keys to change tabs. Tabs scroll when the container is narrow.

1posthog.capture('report_exported', {2    format: 'csv',3})

Highlights and changes

Use highlights to point at the lines that the text talks about, and added or removed marks to show a change. Line numbers can start at any value.

feature-flags.tsTypeScript

40 const flag = 'new-reports'41-Removed: const enabled = false42+Added: const enabled = await isFeatureOn(43+Added:     flag44+Added: )45 46 renderReports({ enabled })

Long blocks and long lines

Show more expands tall code. Focus the code region to scroll with the keyboard.

1WITH signups AS (2    SELECT3        person_id,4        min(timestamp) AS signup_time5    FROM events6    WHERE event = 'signup_completed'7    GROUP BY person_id8)9SELECT10    toStartOfWeek(signup_time) AS week,11    count(DISTINCT signups.person_id) AS activated_users12FROM signups13JOIN events ON events.person_id = signups.person_id14WHERE events.event = 'report_exported'15    AND events.timestamp BETWEEN signup_time AND signup_time + INTERVAL 7 DAY16GROUP BY week17ORDER BY week DESC

Usage

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

Use CodeBlock for multi-line code and file tabs. For a command to copy, use Snippet. For code in a sentence, use Snippet.Inline.
Give each snippet a stable, unique id.
Set maxHeight for long files. The Show more control appears only when the code is taller.

API

CodeBlock is a site component. It accepts div attributes and a div ref. Import CodeSnippet and CodeBlockProps as types.

CodeBlock

Prop	Type	Default	Description
snippets	readonly CodeSnippet[]	–	The code files or language options.
value / defaultValue	string	First snippet id	The controlled or initial active snippet id.
onValueChange	(id: string) => void	–	Runs when the user selects a snippet. Returns its id, not the old LanguageOption object.
lineNumbers	boolean	false	Shows the line-number gutter.
lineNumberStart	number	1	Sets the first displayed number. It does not change line metadata positions.
maxHeight	number	–	Limits the collapsed code height in pixels. Show more reveals the complete snippet. Omit it to show all code.
showCopy	boolean	true	Shows the library CopyButton.
onCopy	() => void	–	Runs after the clipboard write succeeds.
className	string	–	Merges classes with the solid editor surface.
ref	Ref<HTMLDivElement>	–	References the outer div.

CodeSnippet

Prop	Type	Default	Description
id	string	–	A unique, stable id for selection and expansion state.
code	string	–	The complete source text. Whitespace remains unchanged.
language	string	Plain text	A Prism language or an alias from the existing language map.
fileName / label	string	–	Sets the header or tab text. The file name takes priority.
highlightedLines	readonly number[]	–	One-based positions of highlighted lines. Each line has a tinted fill and a one-pixel marker.
addedLines / removedLines	readonly number[]	–	One-based positions of diff lines. These fields do not alter the code.