Code Block

A customizable code block component with syntax highlighting, copy functionality, and scroll area support.

Loading component...

Installation

Usage

The CodeBlock component provides a structured way to display code with syntax highlighting, copy functionality, and scrollable content:

import { CodeBlock, Pre, SimpleCodeBlock } from '@/components/redpanda-ui/code-block';

// Basic usage with syntax highlighting
const sampleCode = `function greetUser(name: string): string {
  return \`Hello, \${name}! Welcome to Redpanda UI.\`;
}`;

export function Example() {
  return (
    <CodeBlock title="greet.ts" icon="📄">
      <Pre>
        <code className="language-typescript">{sampleCode}</code>
      </Pre>
    </CodeBlock>
  );
}

// Simplified interface for quick code blocks
export function SimpleExample() {
  return (
    <SimpleCodeBlock
      code={sampleCode}
      language="language-typescript"
      title="greet.ts"
      icon="📄"
      size="default"
      allowCopy={true}
    />
  );
}

// Different sizes and configurations
export function VariousExamples() {
  return (
    <>
      {/* Small code block */}
      <CodeBlock size="sm" width="sm" maxHeight="sm">
        <Pre>
          <code className="language-bash">npm install @redpanda-ui/core</code>
        </Pre>
      </CodeBlock>

      {/* Full width with no copy button */}
      <CodeBlock 
        title="config.json" 
        width="full" 
        allowCopy={false}
        onCopy={() => console.log('Code copied!')}
      >
        <Pre>
          <code className="language-json">
            {JSON.stringify({ theme: "dark", fontSize: 14 }, null, 2)}
          </code>
        </Pre>
      </CodeBlock>

      {/* Large with unlimited height */}
      <CodeBlock size="lg" maxHeight="none">
        <Pre>
          <code className="language-typescript">
            {/* Long code content here */}
          </code>
        </Pre>
      </CodeBlock>
    </>
  );
}

When to use

Use this decision tree to determine when to use the CodeBlock component and which configuration is most appropriate:

Use Cases

Documentation: Code examples, API snippets, configuration files
Tutorials: Step-by-step code instructions with file context
Error messages: Stack traces, logs, debug output
Code sharing: Shareable code snippets with copy functionality
Reference: Command line instructions, installation steps

CodeBlock vs Other Components

Use CodeBlock when: You need to display formatted code with copy functionality, file context, or scrollable content
Use inline <code> when: Short code snippets within text, variable names, or simple commands
Use CodeEditor when: Users need to edit code, with syntax checking and interactive features
Use Pre when: You need basic preformatted text without the enhanced features

Anatomy

The CodeBlock component is built with composition and provides multiple layers for different functionality:

CodeBlock Component Structure:
┌─────────────────────────────────────────────────┐
│ Figure Container (Variants: size, width, height)│
│ ┌─────────────────────────────────────────────┐ │
│ │ Header (Conditional - if title provided)   │ │
│ │ ┌─────────────────────────────────────────┐ │ │
│ │ │ [📄] Title Text        [Copy Button]   │ │ │
│ │ │ - Icon (string/ReactNode)              │ │ │
│ │ │ - Figcaption with truncation           │ │ │
│ │ │ - CopyButton (conditional)             │ │ │
│ │ └─────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────┐ │
│ │ ScrollArea (Horizontal + Vertical)          │ │
│ │ ┌─────────────────────────────────────────┐ │ │
│ │ │ ScrollViewport (Copy Detection Area)   │ │ │
│ │ │ ┌─────────────────────────────────────┐ │ │ │
│ │ │ │ Pre Element                         │ │ │ │
│ │ │ │ ┌─────────────────────────────────┐ │ │ │ │
│ │ │ │ │ Code Element                    │ │ │ │ │
│ │ │ │ │ - className: language-*         │ │ │ │ │
│ │ │ │ │ - Syntax highlighting ready     │ │ │ │ │
│ │ │ │ │ - Selection styling             │ │ │ │ │
│ │ │ │ └─────────────────────────────────┘ │ │ │ │
│ │ │ └─────────────────────────────────────┘ │ │ │
│ │ └─────────────────────────────────────────┘ │ │
│ │ ┌─────────────────────────────────────────┐ │ │
│ │ │ Horizontal ScrollBar                    │ │ │
│ │ └─────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────┘ │
│                                                 │
│ Floating Copy Button (if no title)             │
│ - Positioned absolute top-right                │
│ - Backdrop blur effect                         │
└─────────────────────────────────────────────────┘

SimpleCodeBlock Wrapper:
┌─────────────────────────────────────┐
│ SimpleCodeBlock                     │
│ - Takes: code, language, props      │
│ - Auto-wraps in CodeBlock + Pre     │
│ - Simplified interface              │
│ - Ideal for backend developers      │
└─────────────────────────────────────┘

Component Composition

CodeBlock: Main container with variant styling and scroll management
Pre: Formatted pretext element with padding and overflow handling
Code: Semantic code element with language classes for syntax highlighting
ScrollArea: Radix UI scroll area for smooth scrolling experience
CopyButton: Interactive copy functionality with visual feedback
SimpleCodeBlock: Simplified wrapper for common use cases
Variant System: Size, width, and height controls using CVA
Copy Detection: Smart text extraction excluding ignore classes

Examples

Default

Open in

Loading component...

No title

Open in

Loading component...

No copy button

Open in

Loading component...

Props

CodeBlock

Prop

Type

Pre

Prop

Type

Installation

Usage

When to use

Use Cases

CodeBlock vs Other Components

Anatomy

Component Composition

Examples

Default

No title

No copy button

Props

CodeBlock

Pre

On this page