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>
	);
  }