CodeBlock
A code block with a header (the title, or the language), a copy button, optional line numbers and optional collapsing. Without highlighter the code is plain text; pass any function that returns token lines, or adapt a shiki instance you created with createShikiHighlighter, which uses a light and a dark theme so colors follow the color scheme. Results are cached, and async highlighters render plain text until tokens arrive. collapsedLines hides the rest behind Show N more lines only when at least 5 lines would be hidden; streaming pauses collapsing so new lines stay visible. Long lines scroll horizontally, or wrap with wrapLines, which reads better in narrow widgets. Markdown uses CodeBlock for fenced code, and AgentChat passes its highlighter prop down. Related helpers: countCodeLines, getCollapsedLineCount, highlightCode, useHighlightedLines, clearHighlightCache.
$pnpm add @sinups/ai-kit @mantine/core @mantine/hooks @tabler/icons-react