Code Block

function greet(name: string): string {
  return `Hello, ${name}!`;
}

1
2
3import type { ReactNode } from 'react';

import {

Installation#

pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/code-block.json

Usage#

import {
  CodeBlock,
  CodeBlockActions,
  CodeBlockCode,
  CodeBlockContent,
  CodeBlockCopy,
  CodeBlockLanguage,
  CodeBlockLineNumbers,
} from '@/components/data-display/code-block';

The root holds the code; its parts show it. Compose a header from CollapsibleCard parts, then the body:

<CodeBlock code={source} language="ts">
  <CollapsibleCardHeader>
    <CollapsibleCardTitle>
      <CodeBlockLanguage />
    </CollapsibleCardTitle>
    <CollapsibleCardActions>
      <CodeBlockCopy />
      <CollapsibleCardTrigger />
    </CollapsibleCardActions>
  </CollapsibleCardHeader>
  <CodeBlockContent>
    <CodeBlockLineNumbers />
    <CodeBlockCode />
  </CodeBlockContent>
</CodeBlock>

A block with no header floats its copy action over the code instead, inside CodeBlockActions placed before CodeBlockContent: <CodeBlockActions><CodeBlockCopy variant="secondary" /></CodeBlockActions>. Use it for a self-contained, read-only block; for already-tokenized source with no card chrome, compose HighlightedCode directly.

Composition#

CodeBlock
|-- CollapsibleCardHeader
|   |-- CollapsibleCardTitle
|   |   `-- CodeBlockLanguage
|   `-- CollapsibleCardActions
|       |-- CodeBlockCopy
|       `-- CollapsibleCardTrigger
`-- CodeBlockContent
    |-- CodeBlockLineNumbers
    `-- CodeBlockCode

API reference#

CodeBlock#

Renders CollapsibleCard and takes every prop it takes, plus:

It defaults variant to muted. It sets data-slot="code-block" and data-language to its language.

CodeBlockActions#

Renders a div and takes every prop a div takes. It floats over the code's top-right corner, shown while the block is hovered or one of its children holds keyboard focus; use it for a block with no header. It sets data-slot="code-block-actions".

CodeBlockContent#

Renders CollapsibleCardContent and takes every prop it takes. Its viewport scrolls the code both ways and carries data-slot="code-block-viewport". It sets data-slot="code-block-content".

CodeBlockLineNumbers#

Renders a span and takes every prop a span takes. It numbers every line of the block's code, at least three digits wide, hidden from assistive technology and left out of a copy. It sets data-slot="code-block-line-numbers" and aria-hidden.

CodeBlockCode#

Renders HighlightedCode and takes every prop it takes except lines and children, which it supplies from the block's code and highlighted lines. It sets data-slot="code-block-code".

CodeBlockLanguage#

Renders a span and takes every prop a span takes. It shows the block's language as an icon and display name, "Plain text" when it has none; children replace the name. It sets data-slot="code-block-language".

CodeBlockCopy#

Renders CopyButton and takes every prop it takes except value, which it supplies as the block's code. label defaults to Copy code and size to icon. It sets data-slot="code-block-copy".