# CodeBlock
- **Category:** Typography (`typography`)
- **Slug:** `typography/code-block`
- **Status:** stable
- **Platforms:** web
- **Import:** `import { CodeBlock, CodeComment, CodeLiteral } from "@protocore/pds";`
- **Docs:** https://pds.protocore.io/components/typography/code-block
> Monospace code panel — sunken surface, hairline border, and an optional title bar.
## When to use it
Use `CodeBlock` for any multi-line snippet, command, or config the reader might copy — install steps, contract calls, JSON payloads. The optional `title` bar labels it with a file name or context.
For a single inline token inside a sentence, use `Code` instead — a sunken chip in the text flow. `CodeBlock` deliberately does no syntax highlighting; instead it exposes two spans you place by hand: `CodeComment` (muted) and `CodeLiteral` (accent). Keep `CodeLiteral` to the genuinely notable value — a gas figure, a confirmation count — so the accent stays meaningful, mirroring the one-accent discipline of `SignalCount`.
## Props
### CodeBlock
| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `children` | `ReactNode` | no | — | Code content — a string, or nodes using `CodeComment` / `CodeLiteral`. |
| `className` | `string` | no | — | — |
| `style` | `CSSProperties` | no | — | — |
| `title` | `ReactNode` | no | — | Optional title-bar label (mono) rendered above the code. |
### CodeComment
_No documented props._
### CodeLiteral
_No documented props._
## Examples
### Basics
`CodeBlock` renders a multi-line snippet on a sunken surface with a hairline border. Pass a string as children.
```tsx
import { CodeBlock } from "@protocore/pds";
export default function CodeBlockBasics() {
return (
{`pnpm add @protocore/pds
# then import the tokens once at your root
import "@protocore/pds/styles.css";`}
);
}
```
### Comments & literals
`CodeComment` renders muted; `CodeLiteral` is the one accent moment in the panel — the numeric literal is the only place green appears here.
```tsx
import { CodeBlock, CodeComment, CodeLiteral } from "@protocore/pds";
export default function CodeBlockAnnotated() {
// CodeComment renders muted; CodeLiteral is the one accent moment in the panel.
return (
{"// send a message to another network"}
{"\nendpoint.send(dstEid, message, { gas: "}
200000
{", refund: msg.sender });"}
);
}
```
## Guidelines
**Do**
- Use it for multi-line, copyable snippets and commands.
- Add a `title` to name the file or context.
- Wrap explanatory comments in `CodeComment`.
- Reserve `CodeLiteral` for the one value worth highlighting.
**Don't**
- Don't use it for a single inline token — that is `Code`.
- Don't paint every value with `CodeLiteral`; the accent is a budget.
- Don't hand-roll a scrolling wrapper — the panel handles overflow.
- Don't put keyboard shortcuts in it — those are `Kbd`.
## Accessibility
**Notes**
- Renders a semantic `` structure, preserving whitespace and line breaks for screen readers.
- `CodeComment` and `CodeLiteral` are purely visual spans — meaning lives in the code text, not the colour.
- Long lines scroll horizontally inside the panel so the page body never scrolls sideways.
## Related
`code`, `kbd`, `text`
---
© Protocore. All rights reserved. Use of the Protocore Design System requires prior written authorization from Protocore (contact@protocore.io). These machine-readable materials must not be ingested into ML-training datasets or derivative design systems. See https://pds.protocore.io/legal/