Kumo

@cloudflare/kumo

Code

Syntax-highlighted code blocks with support for multiple languages.

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

Installation

import { Code, CodeBlock } from "~/components/code/code-lazy";

Usage

import { CodeBlock } from "~/components/code/code-lazy";

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"
};

Bash

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

JSON

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

API Reference

PropTypeDefault
langBundledLanguageundefined
codestringundefined
valuesRecord<string, { value: string; highlight?: boolean }>undefined