Code BlockNew

Usage

Use CodeBlock for fenced code output, tool snippets, and AI-generated examples.

Anatomy

import {CodeBlock} from "@heroui-pro/react";

<CodeBlock>
  <CodeBlock.Header>
    <span>typescript</span>
    <CodeBlock.CopyButton code={code} />
  </CodeBlock.Header>
  <CodeBlock.Code code={code} language="typescript" />
</CodeBlock>

CSS Classes

• .code-block - Root code block surface
• .code-block__header - Header row
• .code-block__code - Code scroll region
• .code-block__copy-button - Copy/check icon button

API Reference

CodeBlock

Root container. Also supports native div props.

CodeBlock.Header

Header slot for language labels and actions. Also supports native div props.

CodeBlock.Code

Also supports native div props.

CodeBlock.CopyButton