CodeBlock

Config snippets and terminal commands, highlighted on the server, with a wrap toggle and a copy button.

DataIsland

Examples

The filename is the header label; the language shows next to it.

.mcp.jsonjson

Wrap

{
  "mcpServers": {
    "switchboard": {
      "type": "http",
      "url": "https://sb.example.dev/mcp/u_7f3k2"
    }
  }
}

Example

Wrap

<CodeBlock filename=".mcp.json" language="json" code={config} copyLabel="Copy config" />

Without a filename the header falls back to the language label, "Terminal" for shell. Turn on Wrap for long lines.

Terminal

Wrap

claude mcp add --transport http switchboard https://sb.example.dev/mcp/u_7f3k2

Example

Wrap

<CodeBlock
  language="shell"
  code="claude mcp add --transport http switchboard https://sb.example.dev/mcp/u_7f3k2"
  copyLabel="Copy command"
/>

~/.codex/config.tomltoml

Wrap

[mcp_servers.switchboard]
url = "https://sb.example.dev/mcp/u_7f3k2"
bearer_token_env_var = "SWITCHBOARD_TOKEN"

Example

Wrap

<CodeBlock filename="~/.codex/config.toml" language="toml" code={config} wrap />

No header strip: no label, wrap toggle or copy button.

search_tools(query: string) -> Tool[]

Example

Wrap

<CodeBlock bare language="text" code="search_tools(query: string) -> Tool[]" />

Wrap

import { CodeBlock } from '@switchboard/ui'

<CodeBlock filename=".mcp.json" language="json" code={JSON.stringify(config, null, 2)} />

Every component also takes mix, for css() and mixins applied after its own style.

CodeBlock props
Prop	Type	Default	Description
code*	string	–	The source text. Also what the copy button copies.
language	'json' \| 'shell' \| 'toml' \| 'text'	'text'	Server-side highlighter to use. text is not highlighted.
filename	string	–	Header label. Falls back to the language name (JSON, Terminal, TOML, Text).
copyLabel	string	'Copy'	Accessible name and tooltip of the copy button.
wrap	boolean	–	Start with long lines wrapped instead of scrolling.
bare	boolean	–	Hide the header strip.

Also accepts every <figure> attribute.

Renders a <figure> with the label as its <figcaption>; the <pre> is focusable (tabindex="0") and named by the label so it can be scrolled with the keyboard.
The wrap toggle is a real checkbox named "Wrap long lines" and works without JavaScript.
The copy button announces "Copied to clipboard" through a polite live region.