Cubix
GitHub

Code Block

Syntax-highlighted code surface for assistant replies with copy actions.

Base UIReact AriaRadix UI
RegistryAPI Reference

CodeBlock renders assistant code with sugar-high highlighting, an optional filename header, copy action, language switcher, and line numbers.

greet.ts
export function greet(name: string) {
  return `Hello, ${name}!`
}

console.log(greet("Cubix"))

Installation

pnpm dlx cubix@latest add code-block

Usage

Import
import {
  CodeBlock,
  CodeBlockActions,
  CodeBlockCopyButton,
  CodeBlockFileIcon,
  CodeBlockFilename,
  CodeBlockHeader,
  CodeBlockTitle,
} from "@/components/cubix/code-block"
Example
<CodeBlock code={code} language="typescript">
  <CodeBlockHeader>
    <CodeBlockTitle>
      <CodeBlockFileIcon />
      <CodeBlockFilename>greet.ts</CodeBlockFilename>
    </CodeBlockTitle>
    <CodeBlockActions>
      <CodeBlockCopyButton />
    </CodeBlockActions>
  </CodeBlockHeader>
</CodeBlock>

Composition

 
CodeBlock
├── CodeBlockHeader
│   ├── CodeBlockTitle
│   │   ├── CodeBlockFileIcon
│   │   └── CodeBlockFilename
│   └── CodeBlockActions
│       ├── CodeBlockLanguageSelector
│       └── CodeBlockCopyButton
└── CodeBlockContent (rendered automatically)

Features

  • Filename header with copy button
  • Lightweight sugar-high highlighting that stays fast while streaming
  • Optional line numbers and language selector

Minimal

{
  "name": "cubix",
  "version": "0.1.0",
  "private": true
}

Line numbers

greet.ts
export function greet(name: string) {
  return `Hello, ${name}!`
}

console.log(greet("Cubix"))

Language selector

greet.ts
export function greet(name: string) {
  return `Hello, ${name}!`
}

console.log(greet("Cubix"))

Shell

Terminal
npx cubix@latest add code-block
npm run dev

Long content

next.config.ts
import type { NextConfig } from "next"

const nextConfig: NextConfig = {
  reactStrictMode: true,
  experimental: {
    optimizePackageImports: ["lucide-react"],
  },
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "www.google.com",
      },
    ],
  },
}

export default nextConfig

async function loadSources(query: string) {
  const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`)
  if (!response.ok) {
    throw new Error("Failed to load sources")
  }
  return response.json()
}

Streaming

greet.ts
 

Empty

untitled.ts
 

In a message

Drop this helper into your project, then call it from the composer.
greet.ts
export function greet(name: string) {
  return `Hello, ${name}!`
}

console.log(greet("Cubix"))

API Reference

CodeBlock

PropTypeDefaultDescription
codestring-Source text to highlight. Required.
languagestring"plaintext"Language id or alias resolved by sugar-high (ts, js, python, json, shell, ...).
showLineNumbersbooleanfalseShow CSS counter line numbers beside each line.
childrenReact.ReactNode-Optional header and actions rendered above the code body.

CodeBlockCopyButton

PropTypeDefaultDescription
onCopy() => void-Called after the code is copied successfully.
onError(error: Error) => void-Called when the clipboard write fails.
timeoutnumber2000How long the check icon stays visible after a copy.

CodeBlockLanguageSelector

PropTypeDefaultDescription
valuestring-Controlled language value. Pair with onValueChange.
defaultValuestring-Initial language when uncontrolled.
onValueChange(value: string | null) => void-Called when the selected language changes.