Code Block

Provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks.

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.

See scripts/code-block.tsx for this example.

Installation

npx ai-elements@latest add code-block

Usage

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

Create val
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.

See scripts/code-block-dark.tsx for this example.

Language Selector

Add a language selector to switch between different code implementations:

See scripts/code-block.tsx for this example.

Props

`<CodeBlock />`

Prop	Type	Default	Description
`code`	`string`	-	The code content to display.
`language`	`BundledLanguage`	-	The programming language for syntax highlighting.
`showLineNumbers`	`boolean`	`false`	Whether to show line numbers.
`children`	`React.ReactNode`	-	Child elements like CodeBlockHeader.
`className`	`string`	-	Additional CSS classes.

`<CodeBlockHeader />`

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

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Header content (CodeBlockTitle, CodeBlockActions, etc.).
`className`	`string`	-	Additional CSS classes.

`<CodeBlockTitle />`

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

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Title content (icon, CodeBlockFilename, etc.).
`className`	`string`	-	Additional CSS classes.

`<CodeBlockFilename />`

Displays the filename in monospace font.

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The filename to display.
`className`	`string`	-	Additional CSS classes.

`<CodeBlockActions />`

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

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Action buttons (CodeBlockCopyButton, CodeBlockLanguageSelector, etc.).
`className`	`string`	-	Additional CSS classes.

`<CodeBlockCopyButton />`

Prop	Type	Default	Description
`onCopy`	`() => void`	-	Callback fired after a successful copy.
`onError`	`(error: Error) => void`	-	Callback fired if copying fails.
`timeout`	`number`	`2000`	How long to show the copied state (ms).
`children`	`React.ReactNode`	-	Custom content for the button. Defaults to copy/check icons.
`className`	`string`	-	Additional CSS classes.

`<CodeBlockLanguageSelector />`

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

Prop	Type	Default	Description
`value`	`string`	-	The currently selected language.
`onValueChange`	`(value: string) => void`	-	Callback when the language changes.
`children`	`React.ReactNode`	-	Selector components (Trigger, Content, Items).

`<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.

Prop	Type	Default	Description
`value`	`string`	-	The language value.
`children`	`React.ReactNode`	-	The display label.

`<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.

Prop	Type	Default	Description
`code`	`string`	-	The code content to display.
`language`	`BundledLanguage`	-	The programming language for syntax highlighting.
`showLineNumbers`	`boolean`	`false`	Whether to show line numbers.