Special components · Data display

Code block

Syntax-highlighted code with a language pill, copy button, and an opt-in editable mode. The tokenizer is written from scratch (no external deps) and handles TS/TSX/JS/JSX, JSON, CSS, HTML, and Bash.

Static blocks

SaveForm.tsx

TSX

import { Button } from "kora-ui";

export function SaveForm({ onSave }: { onSave: () => void }) {
  // Submit handler fires on click
  return (
    <Button variant="primary" onClick={onSave}>
      Save changes
    </Button>
  );
}

package.json

JSON

{
  "name": "kora-ui",
  "version": "0.4.0",
  "type": "module",
  "exports": {
    ".": "./dist/index.js",
    "./client": "./dist/client.js"
  }
}

button.css

CSS

.kora-button {
  background: var(--accent);
  color: var(--accent-fg);
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
}

Terminal

Bash

# install and build
npm install kora-ui
npm run build -w kora-ui --if-present

Editable

Pass editable (or an onCodeChange callback) and the block becomes a mini-editor — syntax stays highlighted as you type. Tab inserts two spaces.

playground.ts

EditableTypeScript

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

greet("Isaac");

7 lines · 107 chars

Usage

usage.tsx

TSX

import { CodeBlock } from "kora-ui/client";

// Read-only
<CodeBlock
  code={`const greet = () => "hello";`}
  language="ts"
  filename="greet.ts"
/>

// Editable (controlled)
const [code, setCode] = useState("const x = 1");

<CodeBlock
  code={code}
  onCodeChange={setCode}
  language="ts"
/>

// Editable (uncontrolled)
<CodeBlock code={initial} editable language="ts" />