# Code Block

Code Block [#code-block]

The **CodeBlock** primitive renders syntax-highlighted code with a language label and a working copy-to-clipboard control. Highlighting uses `shiki` loaded lazily on the client (so it never blocks render); until it resolves, a plain themed `<pre>` is shown.

Preview [#preview]

```tsx
'use client';

/**
 * @file code-block-demo.tsx
 * @description Docs preview for `CodeBlock`. Highlighted TypeScript with a
 * working copy control.
 */
import { CodeBlock } from '@/components/code-block';

const CODE = `import { generateText } from '@localmode/core';
import { webllm } from '@localmode/webllm';

const { text } = await generateText({
  model: webllm.languageModel('Llama-3.2-1B-Instruct'),
  prompt: 'Explain local-first AI in one sentence.',
});
console.log(text);`;

export default function CodeBlockDemo() {
  return (
    <div className="w-full max-w-2xl">
      <CodeBlock language="ts" code={CODE} />
    </div>
  );
}
```

Installation [#installation]

```bash
npx shadcn@latest add @localmode/ui/conversation/code-block
```

Dependencies [#dependencies]

* `shiki` — lazy syntax highlighting (already used by the docs site)
* `clsx` + `tailwind-merge` — via the shared `cn()` util (installed automatically as a registry dependency)

Files installed [#files-installed]

* `code-block.tsx` — `CodeBlock`
* `lib/utils.ts` — the `cn()` helper (if not already present)

Props [#props]

**CodeBlock**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `code` | `string` | — | **Required.** The code to render. |
| `language` | `string` | `"text"` | Language id (e.g. "ts", "python"). |
| `hideLabel` | `boolean` | `false` | Hide the language label. |

Examples [#examples]

Highlight a snippet [#highlight-a-snippet]

```tsx
import { CodeBlock } from '@/components/code-block';

<CodeBlock language="ts" code={`const x = 1;`} />
```

Customization [#customization]

Change the Shiki theme in the dynamic import, or delete the import entirely to ship a zero-dependency plain `<pre>` — the copy + label behavior is independent of highlighting.

These primitives are presentational and hook-driven: they render props and emit callbacks, holding only local view state. The orchestration state lives in your app. Every surface uses shadcn/ui CSS-variable utilities, so it inherits your theme — restyle the copied file freely.