Geist Design System

Code Block

Code Block component used across Vercel and Next.js.

Default
Table.jsx
function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}

No filename

 
function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}

Highlighted lines
highlighted.jsx
function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}

Added & removed lines
next.config.js
module.exports = {
  experimental: {
    appDir: true,
  },
  appDir: true,
}

Referenced lines

You can link to lines. Just press on any line number.

function MyComponent(props) {
  return (
    <div>
      <h1>Count: {props.count}</h1>
    </div>
  );
}

Language switcher
language-switcher.jsx
function MyComponent(props) {
	return (
	  <div>
		<h1>Hello, {props.name}!</h1>
		<p>Good to see you</p>
	  </div>
	);
  }

Hidden line numbers
hidden-line-numbers.jsx
function MyComponent(props) {
	return (
	  <div>
		<h1>Hello, {props.name}!</h1>
		<p>Good to see you</p>
	  </div>
	);
  }

Best Practices

When to use

  • Use <CodeBlock> for multi-line, syntax-highlighted source the reader will scan or paste.
  • For a single inline token (env var, function name, file path), use Inline Code.
  • Pick Snippet for a copy-to-clipboard shell command or one-line key reveal; it ships with the prompt glyph and copy affordance built in.

Behavior

  • Always pass a language/syntax (tsx, bash, json, diff). Highlighting is the primary reason to choose <CodeBlock> over a plain <pre>.
  • Highlight only the lines under discussion. A block where every line is highlighted reads the same as no highlight at all.
  • Mark added or removed lines with the diff syntax or the dedicated added/removed props. Faking them with // added comments breaks copy-paste.
  • Show the filename header when the snippet has a paste destination (app/page.tsx, vercel.json). Omit it for ephemeral examples.

Content

  • Snippets stay runnable. Don’t paraphrase real code into pseudo-syntax, and don’t prepend $ to shell commands. <Snippet> already renders the prompt, so text="$ vercel deploy" doubles to $ $ vercel deploy.
  • Keep prose around the block in sentence case and put backticks around CLI flags inline (`--prebuilt`).