---
title: Code Block
description: Render highlighted code with filename and copy controls
type: reference
summary: Use CodeBlock when code is highlighted or assembled outside authored Markdown fences.
url: /docs/components/code-block
source: apps/template/content/docs/components/code-block.mdx
related:
  - /docs/components
  - /docs/syntax
---

# Code Block

import {
  CodeBlockTab,
  CodeBlockTabs,
  CodeBlockTabsList,
  CodeBlockTabsTrigger,
} from "@vercel/geistdocs/components/code-block-tabs";

## Code block

```ts title="example.ts"
export const enabled = true;
```

```tsx
import { CodeBlock } from "@vercel/geistdocs/components/code-block";
```

Pass a `title` to show header chrome with a filename-aware icon and copy control. Markdown code fences use `CodeBlock` automatically through the default MDX map.

## Code block with tabs

<div className="not-prose my-6">
  <CodeBlockTabs defaultValue="pnpm">
    <CodeBlockTabsList>
      <CodeBlockTabsTrigger value="pnpm">pnpm</CodeBlockTabsTrigger>
      <CodeBlockTabsTrigger value="npm">npm</CodeBlockTabsTrigger>
    </CodeBlockTabsList>
    <CodeBlockTab value="pnpm">
      ```shellscript title="Terminal"
      pnpm add @vercel/geistdocs
      ```
    </CodeBlockTab>
    <CodeBlockTab value="npm">
      ```shellscript title="Terminal"
      npm install @vercel/geistdocs
      ```
    </CodeBlockTab>
  </CodeBlockTabs>
</div>

```tsx
import {
  CodeBlockTab,
  CodeBlockTabs,
  CodeBlockTabsList,
  CodeBlockTabsTrigger,
  CompactCodeBlockTabs,
} from "@vercel/geistdocs/components/code-block-tabs";
```

The same components are available without imports in authored MDX.