vercel__ai-elements/apps/docs/content/components/(code)/code-block.mdx

---
title: Code Block
description: Provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks.
path: elements/components/code-block
---

The `CodeBlock` component provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks. It's fully composable, allowing you to customize the header, actions, and content.

<Preview path="code-block" />

## Installation

<ElementsInstaller path="code-block" />

## Usage

The CodeBlock is fully composable. Here's a basic example:

```tsx
import {
  CodeBlock,
  CodeBlockActions,
  CodeBlockCopyButton,
  CodeBlockFilename,
  CodeBlockHeader,
  CodeBlockTitle,
} from "@/components/ai-elements/code-block";
import { FileIcon } from "lucide-react";

export const Example = () => (
  <CodeBlock code={code} language="typescript">
    <CodeBlockHeader>
      <CodeBlockTitle>
        <FileIcon size={14} />
        <CodeBlockFilename>example.ts</CodeBlockFilename>
      </CodeBlockTitle>
      <CodeBlockActions>
        <CodeBlockCopyButton />
      </CodeBlockActions>
    </CodeBlockHeader>
  </CodeBlock>
);
```

## Features

- Syntax highlighting with Shiki
- Line numbers (optional)
- Copy to clipboard functionality
- Automatic light/dark theme switching via CSS variables
- Language selector for multi-language examples
- Fully composable architecture
- Accessible design

## Examples

### Dark Mode

To use the `CodeBlock` component in dark mode, wrap it in a `div` with the `dark` class.

<Preview path="code-block-dark" />

### Language Selector

Add a language selector to switch between different code implementations:

<Preview path="code-block" />

## Props

### `<CodeBlock />`

<TypeTable
  type={{
    code: {
      description: "The code content to display.",
      type: "string",
    },
    language: {
      description: "The programming language for syntax highlighting.",
      type: "BundledLanguage",
    },
    showLineNumbers: {
      description: "Whether to show line numbers.",
      type: "boolean",
      default: "false",
    },
    children: {
      description: "Child elements like CodeBlockHeader.",
      type: "React.ReactNode",
    },
    className: {
      description: "Additional CSS classes.",
      type: "string",
    },
  }}
/>

### `<CodeBlockHeader />`

Container for the header row. Uses flexbox with `justify-between`.

<TypeTable
  type={{
    children: {
      description: "Header content (CodeBlockTitle, CodeBlockActions, etc.).",
      type: "React.ReactNode",
    },
    className: {
      description: "Additional CSS classes.",
      type: "string",
    },
  }}
/>

### `<CodeBlockTitle />`

Left-aligned container for icon and filename. Uses flexbox with `gap-2`.

<TypeTable
  type={{
    children: {
      description: "Title content (icon, CodeBlockFilename, etc.).",
      type: "React.ReactNode",
    },
    className: {
      description: "Additional CSS classes.",
      type: "string",
    },
  }}
/>

### `<CodeBlockFilename />`

Displays the filename in monospace font.

<TypeTable
  type={{
    children: {
      description: "The filename to display.",
      type: "React.ReactNode",
    },
    className: {
      description: "Additional CSS classes.",
      type: "string",
    },
  }}
/>

### `<CodeBlockActions />`

Right-aligned container for action buttons. Uses flexbox with `gap-2`.

<TypeTable
  type={{
    children: {
      description:
        "Action buttons (CodeBlockCopyButton, CodeBlockLanguageSelector, etc.).",
      type: "React.ReactNode",
    },
    className: {
      description: "Additional CSS classes.",
      type: "string",
    },
  }}
/>

### `<CodeBlockCopyButton />`

<TypeTable
  type={{
    onCopy: {
      description: "Callback fired after a successful copy.",
      type: "() => void",
    },
    onError: {
      description: "Callback fired if copying fails.",
      type: "(error: Error) => void",
    },
    timeout: {
      description: "How long to show the copied state (ms).",
      type: "number",
      default: "2000",
    },
    children: {
      description:
        "Custom content for the button. Defaults to copy/check icons.",
      type: "React.ReactNode",
    },
    className: {
      description: "Additional CSS classes.",
      type: "string",
    },
  }}
/>

### `<CodeBlockLanguageSelector />`

Wrapper for the language selector. Extends shadcn/ui Select.

<TypeTable
  type={{
    value: {
      description: "The currently selected language.",
      type: "string",
    },
    onValueChange: {
      description: "Callback when the language changes.",
      type: "(value: string) => void",
    },
    children: {
      description: "Selector components (Trigger, Content, Items).",
      type: "React.ReactNode",
    },
  }}
/>

### `<CodeBlockLanguageSelectorTrigger />`

Trigger button for the language selector dropdown. Pre-styled for code block header.

### `<CodeBlockLanguageSelectorValue />`

Displays the selected language value.

### `<CodeBlockLanguageSelectorContent />`

Dropdown content container. Defaults to `align="end"`.

### `<CodeBlockLanguageSelectorItem />`

Individual language option in the dropdown.

<TypeTable
  type={{
    value: {
      description: "The language value.",
      type: "string",
    },
    children: {
      description: "The display label.",
      type: "React.ReactNode",
    },
  }}
/>

### `<CodeBlockContainer />`

Low-level container component with performance optimizations (`contentVisibility`). Used internally by CodeBlock.

### `<CodeBlockContent />`

Low-level component that handles syntax highlighting. Used internally by CodeBlock, but can be used directly for custom layouts.

<TypeTable
  type={{
    code: {
      description: "The code content to display.",
      type: "string",
    },
    language: {
      description: "The programming language for syntax highlighting.",
      type: "BundledLanguage",
    },
    showLineNumbers: {
      description: "Whether to show line numbers.",
      type: "boolean",
      default: "false",
    },
  }}
/>