Code Components

CodeBlock Component

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

Features

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

Usage

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

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

<CodeBlock />

| Prop | Type | Default | |------|------|---------| | code | string | Code content | | language | BundledLanguage | Language for highlighting | | showLineNumbers | boolean | false | | children | React.ReactNode | Header elements | | className | string | CSS classes |

<CodeBlockHeader />

Container for header row with flex justify-between.

| Prop | Type | Description | |------|------|-------------| | children | React.ReactNode | Title, actions | | className | string | CSS classes |

<CodeBlockTitle />

Left-aligned container for icon and filename.

| Prop | Type | Description | |------|------|-------------| | children | React.ReactNode | Icon, filename | | className | string | CSS classes |

<CodeBlockFilename />

Displays filename in monospace font.

| Prop | Type | Description | |------|------|-------------| | children | React.ReactNode | Filename |

<CodeBlockActions />

Right-aligned container for action buttons.

| Prop | Type | Description | |------|------|-------------| | children | React.ReactNode | Action buttons | | className | string | CSS classes |

<CodeBlockCopyButton />

| Prop | Type | Default | |------|------|---------| | onCopy | () => void | Callback after copy | | onError | (error: Error) => void | Callback on error | | timeout | number | 2000 (ms) | | children | React.ReactNode | Custom button content | | className | string | CSS classes |

<CodeBlockLanguageSelector />

Wrapper for language selector. Extends shadcn/ui Select.

| Prop | Type | Description | |------|------|-------------| | value | string | Selected language | | onValueChange | (value: string) => void | Change callback | | children | React.ReactNode | Selector components |

<CodeBlockContent />

Low-level component for syntax highlighting.

| Prop | Type | Default | |------|------|---------| | code | string | Code content | | language | BundledLanguage | Language | | showLineNumbers | boolean | false |

Snippet Component

Lightweight inline code display for terminal commands.

Features

• Composable architecture with InputGroup
• Optional prefix text (e.g., $ for terminal)
• Built-in copy button
• Compact design for chat/markdown

<Snippet />

| Prop | Type | Description | |------|------|-------------| | code | string | Code content (required) | | children | React.ReactNode | Child elements | | ...props | React.ComponentProps<typeof InputGroup> | Spread to InputGroup |

<SnippetAddon />

| Prop | Type | Description | |------|------|-------------| | ...props | React.ComponentProps<typeof InputGroupAddon> | Spread to InputGroupAddon |

<SnippetText />

| Prop | Type | Description | |------|------|-------------| | ...props | React.ComponentProps<typeof InputGroupText> | Spread to InputGroupText |

<SnippetInput />

| Prop | Type | Description | |------|------|-------------| | ...props | Omit<React.ComponentProps<typeof InputGroupInput>, "readOnly" \| "value"> | Spread to InputGroupInput |

Terminal Component

Terminal-style display component.

FileTree Component

Displays file/folder structure.

<FileTree />

Displays hierarchical file structure.

<FileTreeFile />

Individual file in the tree.

<FileTreeFolder />

Folder with expand/collapse.

StackTrace Component

Displays error stack traces.

<StackTrace />

| Prop | Type | Description | |------|------|-------------| | stack | string | Stack trace string | | ...props | React.HTMLAttributes<HTMLDivElement> | Spread to div |

Commit Component

Displays git commit information.

<Commit />

| Prop | Type | Description | |------|------|-------------| | commit | object | Commit data | | ...props | React.HTMLAttributes<HTMLDivElement> | Spread to div |

SchemaDisplay Component

Displays JSON/data schemas.

<SchemaDisplay />

| Prop | Type | Description | |------|------|-------------| | schema | object \| string | Schema to display | | ...props | React.HTMLAttributes<HTMLDivElement> | Spread to div |

Agent Component

Displays agent status and information.

<Agent />

| Prop | Type | Description | |------|------|-------------| | status | string | Agent status | | ...props | React.HTMLAttributes<HTMLDivElement> | Spread to div |

EnvironmentVariables Component

Displays environment variables.

<EnvironmentVariables />

| Prop | Type | Description | |------|------|-------------| | variables | Record<string, string> | Env vars | | ...props | React.HTMLAttributes<HTMLDivElement> | Spread to div |

PackageInfo Component

Displays npm package information.

<PackageInfo />

| Prop | Type | Description | |------|------|-------------| | name | string | Package name | | version | string | Package version | | ...props | React.HTMLAttributes<HTMLDivElement> | Spread to div |

JSXPreview Component

Live preview for JSX code.

<JSXPreview />

| Prop | Type | Description | |------|------|-------------| | code | string | JSX code | | ...props | React.HTMLAttributes<HTMLDivElement> | Spread to div |

Sandbox Component

Code sandbox embed.

<Sandbox />

| Prop | Type | Description | |------|------|-------------| | src | string | Sandbox URL | | ...props | React.IframeHTMLAttributes<HTMLIFrameElement> | Spread to iframe |

TestResults Component

Displays test results.

<TestResults />

| Prop | Type | Description | |------|------|-------------| | results | object | Test results data | | ...props | React.HTMLAttributes<HTMLDivElement> | Spread to div |

WebPreview Component

Website preview/thumbnail.

<WebPreview />

| Prop | Type | Description | |------|------|-------------| | src | string | Website URL | | ...props | React.HTMLAttributes<HTMLDivElement> | Spread to div |