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.

function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}

function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}

"use client";

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

const code = `function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}`;

const Example = () => (
  <CodeBlock code={code} language="jsx">
    <CodeBlockCopyButton
      onCopy={() => console.log("Copied code to clipboard")}
      onError={() => console.error("Failed to copy code to clipboard")}
    />
  </CodeBlock>
);

export default Example;

"use client";import { CodeBlock, CodeBlockCopyButton } from "@/components/ai-elements/elements/code-block";const code = `function MyComponent(props) {  return (    <div>      <h1>Hello, {props.name}!</h1>      <p>This is an example React component.</p>    </div>  );}`;const Example = () => (  <CodeBlock code={code} language="jsx">    <CodeBlockCopyButton      onCopy={() => console.log("Copied code to clipboard")}      onError={() => console.error("Failed to copy code to clipboard")}    />  </CodeBlock>);export default Example;

Installation

npx ai-elements@latest add code-block

npx ai-elements@latest add code-block

npx shadcn@latest add @ai-elements/code-block

npx shadcn@latest add @ai-elements/code-block

"use client";

import { Button } from "@repo/shadcn-ui/components/ui/button";
import { cn } from "@repo/shadcn-ui/lib/utils";
import { CheckIcon, CopyIcon } from "lucide-react";
import type { ComponentProps, HTMLAttributes, ReactNode } from "react";
import { createContext, useContext, useState } from "react";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import {
  oneDark,
  oneLight,
} from "react-syntax-highlighter/dist/esm/styles/prism";

type CodeBlockContextType = {
  code: string;
};

const CodeBlockContext = createContext<CodeBlockContextType>({
  code: "",
});

export type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {
  code: string;
  language: string;
  showLineNumbers?: boolean;
  children?: ReactNode;
};

export const CodeBlock = ({
  code,
  language,
  showLineNumbers = false,
  className,
  children,
  ...props
}: CodeBlockProps) => (
  <CodeBlockContext.Provider value={{ code }}>
    <div
      className={cn(
        "relative w-full overflow-hidden rounded-md border bg-background text-foreground",
        className
      )}
      {...props}
    >
      <div className="relative">
        <SyntaxHighlighter
          className="overflow-hidden dark:hidden"
          codeTagProps={{
            className: "font-mono text-sm",
          }}
          customStyle={{
            margin: 0,
            padding: "1rem",
            fontSize: "0.875rem",
            background: "hsl(var(--background))",
            color: "hsl(var(--foreground))",
          }}
          language={language}
          lineNumberStyle={{
            color: "hsl(var(--muted-foreground))",
            paddingRight: "1rem",
            minWidth: "2.5rem",
          }}
          showLineNumbers={showLineNumbers}
          style={oneLight}
        >
          {code}
        </SyntaxHighlighter>
        <SyntaxHighlighter
          className="hidden overflow-hidden dark:block"
          codeTagProps={{
            className: "font-mono text-sm",
          }}
          customStyle={{
            margin: 0,
            padding: "1rem",
            fontSize: "0.875rem",
            background: "hsl(var(--background))",
            color: "hsl(var(--foreground))",
          }}
          language={language}
          lineNumberStyle={{
            color: "hsl(var(--muted-foreground))",
            paddingRight: "1rem",
            minWidth: "2.5rem",
          }}
          showLineNumbers={showLineNumbers}
          style={oneDark}
        >
          {code}
        </SyntaxHighlighter>
        {children && (
          <div className="absolute top-2 right-2 flex items-center gap-2">
            {children}
          </div>
        )}
      </div>
    </div>
  </CodeBlockContext.Provider>
);

export type CodeBlockCopyButtonProps = ComponentProps<typeof Button> & {
  onCopy?: () => void;
  onError?: (error: Error) => void;
  timeout?: number;
};

export const CodeBlockCopyButton = ({
  onCopy,
  onError,
  timeout = 2000,
  children,
  className,
  ...props
}: CodeBlockCopyButtonProps) => {
  const [isCopied, setIsCopied] = useState(false);
  const { code } = useContext(CodeBlockContext);

  const copyToClipboard = async () => {
    if (typeof window === "undefined" || !navigator.clipboard.writeText) {
      onError?.(new Error("Clipboard API not available"));
      return;
    }

    try {
      await navigator.clipboard.writeText(code);
      setIsCopied(true);
      onCopy?.();
      setTimeout(() => setIsCopied(false), timeout);
    } catch (error) {
      onError?.(error as Error);
    }
  };

  const Icon = isCopied ? CheckIcon : CopyIcon;

  return (
    <Button
      className={cn("shrink-0", className)}
      onClick={copyToClipboard}
      size="icon"
      variant="ghost"
      {...props}
    >
      {children ?? <Icon size={14} />}
    </Button>
  );
};

"use client";import { Button } from "@repo/shadcn-ui/components/ui/button";import { cn } from "@repo/shadcn-ui/lib/utils";import { CheckIcon, CopyIcon } from "lucide-react";import type { ComponentProps, HTMLAttributes, ReactNode } from "react";import { createContext, useContext, useState } from "react";import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";import {  oneDark,  oneLight,} from "react-syntax-highlighter/dist/esm/styles/prism";type CodeBlockContextType = {  code: string;};const CodeBlockContext = createContext<CodeBlockContextType>({  code: "",});export type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {  code: string;  language: string;  showLineNumbers?: boolean;  children?: ReactNode;};export const CodeBlock = ({  code,  language,  showLineNumbers = false,  className,  children,  ...props}: CodeBlockProps) => (  <CodeBlockContext.Provider value={{ code }}>    <div      className={cn(        "relative w-full overflow-hidden rounded-md border bg-background text-foreground",        className      )}      {...props}    >      <div className="relative">        <SyntaxHighlighter          className="overflow-hidden dark:hidden"          codeTagProps={{            className: "font-mono text-sm",          }}          customStyle={{            margin: 0,            padding: "1rem",            fontSize: "0.875rem",            background: "hsl(var(--background))",            color: "hsl(var(--foreground))",          }}          language={language}          lineNumberStyle={{            color: "hsl(var(--muted-foreground))",            paddingRight: "1rem",            minWidth: "2.5rem",          }}          showLineNumbers={showLineNumbers}          style={oneLight}        >          {code}        </SyntaxHighlighter>        <SyntaxHighlighter          className="hidden overflow-hidden dark:block"          codeTagProps={{            className: "font-mono text-sm",          }}          customStyle={{            margin: 0,            padding: "1rem",            fontSize: "0.875rem",            background: "hsl(var(--background))",            color: "hsl(var(--foreground))",          }}          language={language}          lineNumberStyle={{            color: "hsl(var(--muted-foreground))",            paddingRight: "1rem",            minWidth: "2.5rem",          }}          showLineNumbers={showLineNumbers}          style={oneDark}        >          {code}        </SyntaxHighlighter>        {children && (          <div className="absolute top-2 right-2 flex items-center gap-2">            {children}          </div>        )}      </div>    </div>  </CodeBlockContext.Provider>);export type CodeBlockCopyButtonProps = ComponentProps<typeof Button> & {  onCopy?: () => void;  onError?: (error: Error) => void;  timeout?: number;};export const CodeBlockCopyButton = ({  onCopy,  onError,  timeout = 2000,  children,  className,  ...props}: CodeBlockCopyButtonProps) => {  const [isCopied, setIsCopied] = useState(false);  const { code } = useContext(CodeBlockContext);  const copyToClipboard = async () => {    if (typeof window === "undefined" || !navigator.clipboard.writeText) {      onError?.(new Error("Clipboard API not available"));      return;    }    try {      await navigator.clipboard.writeText(code);      setIsCopied(true);      onCopy?.();      setTimeout(() => setIsCopied(false), timeout);    } catch (error) {      onError?.(error as Error);    }  };  const Icon = isCopied ? CheckIcon : CopyIcon;  return (    <Button      className={cn("shrink-0", className)}      onClick={copyToClipboard}      size="icon"      variant="ghost"      {...props}    >      {children ?? <Icon size={14} />}    </Button>  );};

Usage

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

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

Add the following component to your frontend:

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:

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.

function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}

function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}

"use client";

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

const code = `function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}`;

const Example = () => (
  <div className="dark">
    <CodeBlock code={code} language="jsx">
      <CodeBlockCopyButton
        onCopy={() => console.log("Copied code to clipboard")}
        onError={() => console.error("Failed to copy code to clipboard")}
      />
    </CodeBlock>
  </div>
);

export default Example;

"use client";import { CodeBlock, CodeBlockCopyButton } from "@/components/ai-elements/elements/code-block";const code = `function MyComponent(props) {  return (    <div>      <h1>Hello, {props.name}!</h1>      <p>This is an example React component.</p>    </div>  );}`;const Example = () => (  <div className="dark">    <CodeBlock code={code} language="jsx">      <CodeBlockCopyButton        onCopy={() => console.log("Copied code to clipboard")}        onError={() => console.error("Failed to copy code to clipboard")}      />    </CodeBlock>  </div>);export default Example;

Props

`<CodeBlock />`

Prop

Type

`<CodeBlockCopyButton />`

Prop

Type

On this page