temetro/.agents/skills/ai-elements/references/code-block.md

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:

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.