Code - Kumo

const greeting = "Hello, World!";
console.log(greeting);

<CodeBlock
  lang="tsx"
  code={`const greeting = "Hello, World!";
console.log(greeting);`}
/>

Installation

Barrel

import { Code, CodeBlock } from "@cloudflare/kumo";

Granular

import { Code, CodeBlock } from "@cloudflare/kumo/components/code";

Usage

import { CodeBlock } from "@cloudflare/kumo";

export default function Example() {
  return (
    <CodeBlock 
      lang="tsx" 
      code={`const hello = "world";`} 
    />
  );
}

Examples

TypeScript

interface User {
  id: string;
  name: string;
  email: string;
}

const user: User = {
  id: "1",
  name: "John Doe",
  email: "john@example.com"
};

<CodeBlock
  lang="tsx"
  code={`interface User {
  id: string;
  name: string;
  email: string;
}

const user: User = {
  id: "1",
  name: "John Doe",
  email: "john@example.com"
};`}
/>

Bash

npm install @cloudflare/kumo
pnpm add @cloudflare/kumo

<CodeBlock
  lang="bash"
  code={`npm install @cloudflare/kumo
pnpm add @cloudflare/kumo`}
/>

JSON

{
  "name": "kumo",
  "version": "1.0.0",
  "dependencies": {
    "react": "^19.0.0"
  }
}

<CodeBlock
  lang="jsonc"
  code={`{
  "name": "kumo",
  "version": "1.0.0",
  "dependencies": {
    "react": "^19.0.0"
  }
}`}
/>

Template Values

Use the values prop to interpolate and highlight dynamic content.

export API_KEY={{apiKey}}

<Code 
  lang="bash" 
  code="export API_KEY={{apiKey}}" 
  values={{
    apiKey: { value: "sk_live_123", highlight: true }
  }}
/>

API Reference

Prop	Type	Default	Description
lang	`"ts" \| "tsx" \| "jsonc" \| "bash" \| "css"`	`"ts"`	Language hint for the code content. - `"ts"` — TypeScript code - `"tsx"` — TypeScript JSX code - `"jsonc"` — JSON with comments - `"bash"` — Shell/Bash commands - `"css"` — CSS styles
code*	`string`	-	The code string to display.
values	`Record<string, { value: string; highlight?: boolean }>`	-	Template values for `{{key}}` interpolation. Values with `highlight: true` are visually emphasized.
className	`string`	-	Additional CSS classes merged via `cn()`.