Component

Code Block

A styled container for displaying source code. Compose CodeBlock with an optional CodeBlockHeader and a CodeBlockContent. Built on the headless @refraction-ui/code-block core.

Basic

A bare code block wrapping a CodeBlockContent.

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

greet('world')

With header

Add a CodeBlockHeader for a filename or language label.

greet.jsJavaScript

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

greet('world')

Installation

$pnpm add @refraction-ui/react-code-block

Usage

tsx

import {
  CodeBlock,
  CodeBlockHeader,
  CodeBlockContent,
} from '@refraction-ui/react'

export function Example() {
  return (
    <CodeBlock>
      <CodeBlockHeader>
        <span>greet.js</span>
        <span>JavaScript</span>
      </CodeBlockHeader>
      <CodeBlockContent>{`greet('world')`}</CodeBlockContent>
    </CodeBlock>
  )
}

Props

Prop	Type	Default	Description
`className`	`string`	--	Additional CSS classes merged onto the container.
`...props`	`HTMLAttributes<HTMLDivElement>`	--	All standard div attributes are forwarded. `CodeBlockContent` forwards `pre` attributes, `CodeBlockHeader` forwards `div` attributes.