gh-nathanonn-claude-skills-ai-elements-claude-skills-ai-elements/docs/components/code-block.md

# Code Block

URL: /components/code-block

---

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.

<Preview path="code-block" />

## Installation

<ElementsInstaller path="code-block" />

## Usage

```tsx
import { CodeBlock, CodeBlockCopyButton } from "@/components/ai-elements/code-block";
```

```tsx
<CodeBlock data={"console.log('hello world')"} language="jsx">
    <CodeBlockCopyButton onCopy={() => console.log("Copied code to clipboard")} onError={() => console.error("Failed to copy code to clipboard")} />
</CodeBlock>
```

## Usage with AI SDK

Build a simple code generation tool using the [`experimental_useObject`](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-object) hook.

Add the following component to your frontend:

```tsx title="app/page.tsx"
"use client";

import { experimental_useObject as useObject } from "@ai-sdk/react";
import { codeBlockSchema } from "@/app/api/codegen/route";
import { Input, PromptInputTextarea, PromptInputSubmit } from "@/components/ai-elements/prompt-input";
import { CodeBlock, CodeBlockCopyButton } from "@/components/ai-elements/code-block";
import { useState } from "react";

export default function Page() {
    const [input, setInput] = useState("");
    const { object, submit, isLoading } = useObject({
        api: "/api/codegen",
        schema: codeBlockSchema,
    });

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        if (input.trim()) {
            submit(input);
        }
    };

    return (
        <div className="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
            <div className="flex flex-col h-full">
                <div className="flex-1 overflow-auto mb-4">
                    {object?.code && object?.language && (
                        <CodeBlock code={object.code} language={object.language} showLineNumbers={true}>
                            <CodeBlockCopyButton />
                        </CodeBlock>
                    )}
                </div>

                <Input onSubmit={handleSubmit} className="mt-4 w-full max-w-2xl mx-auto relative">
                    <PromptInputTextarea
                        value={input}
                        placeholder="Generate a React todolist component"
                        onChange={(e) => setInput(e.currentTarget.value)}
                        className="pr-12"
                    />
                    <PromptInputSubmit status={isLoading ? "streaming" : "ready"} disabled={!input.trim()} className="absolute bottom-1 right-1" />
                </Input>
            </div>
        </div>
    );
}
```

Add the following route to your backend:

```tsx title="api/codegen/route.ts"
import { streamObject } from "ai";
import { z } from "zod";

export const codeBlockSchema = z.object({
    language: z.string(),
    filename: z.string(),
    code: z.string(),
});
// Allow streaming responses up to 30 seconds
export const maxDuration = 30;

export async function POST(req: Request) {
    const context = await req.json();

    const result = streamObject({
        model: "openai/gpt-4o",
        schema: codeBlockSchema,
        prompt: `You are a helpful coding assitant. Only generate code, no markdown formatting or backticks, or text.` + context,
    });

    return result.toTextStreamResponse();
}
```

## Features

-   Syntax highlighting with react-syntax-highlighter
-   Line numbers (optional)
-   Copy to clipboard functionality
-   Automatic light/dark theme switching
-   Customizable styles
-   Accessible design

## Examples

### Dark Mode

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

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

## Props

### `<CodeBlock />`

<TypeTable
type={{
  code: {
    description: 'The code content to display.',
    type: 'string',
  },
  language: {
    description: 'The programming language for syntax highlighting.',
    type: 'string',
  },
  showLineNumbers: {
    description: 'Whether to show line numbers.',
    type: 'boolean',
    default: 'false',
  },
  children: {
    description: 'Child elements (like CodeBlockCopyButton) positioned in the top-right corner.',
    type: 'React.ReactNode',
  },
  className: {
    description: 'Additional CSS classes to apply to the root container.',
    type: 'string',
  },
  '...props': {
    description: 'Any other props are spread to the root div.',
    type: 'React.HTMLAttributes<HTMLDivElement>',
  },
}}
/>

### `<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 to apply to the button.',
    type: 'string',
  },
  '...props': {
    description: 'Any other props are spread to the underlying shadcn/ui Button component.',
    type: 'React.ComponentProps<typeof Button>',
  },
}}
/>