codeBlock() renders a framed code figure with an optional filename header and a ghost copy button. The copy button is wired by the runtime ([data-cpd-copy]).

With filename

Filename header

src/lib/ui/tokens.ts

export const LAYOUT = {
  sidebarWidth: 256,
  tocWidth: 256,
  pageMaxWidth: 800,
} as const;

codeBlock({
  filename: 'src/lib/ui/tokens.ts',
  lang: 'ts',
  code: 'export const LAYOUT = {\n  sidebarWidth: 256,\n  tocWidth: 256,\n  pageMaxWidth: 800,\n} as const;\n',
});

Without filename

Bare code

Bash

bun install
bun run dev

codeBlock({
  lang: 'bash',
  code: 'bun install\nbun run dev\n',
});

Snippet (multiple files)

Pass tabs to render a multi-file snippet: the header shows one tab per file; the copy button copies the active tab.

Snippet with tabs

drawer.tsruntime.ts

export function renderDrawer(options) {
  // ...
}

export function initDrawers(root) {
  // ...
}

codeBlock({
  lang: 'ts',
  tabs: [
    { label: 'drawer.ts', code: 'export function renderDrawer(options) {\n  // ...\n}\n' },
    { label: 'runtime.ts', code: 'export function initDrawers(root) {\n  // ...\n}\n' },
  ],
});

Props

Option	Type	Default	Description
code	string	—	Code text (required when tabs is omitted).
filename	string	''	Filename shown in the header — also enables the copy button.
lang	string	''	Language hint class (language-<lang>), no syntax highlighting.
tabs	CodeBlockTab[]	—	Multi-file snippet: { label, code } per file; header renders tabs and the copy button copies the active tab.

Notes

• The builder escapes code — raw markup is never executed.
• No syntax highlighting ships with the kit; the real docs pages use astro-expressive-code blocks instead (styled to match).
• Copy uses navigator.clipboard with a fallback execCommand('copy').