Code Block
.mdAI-style code block with filename header, copy button, line numbers, line highlights and a tiny highlighter; long code collapses behind a height spring.
aicodesyntaxhighlightcopysnippet
Installation
$npx shadcn@latest add @geturui/code-block
Also installs: Copy Button
Usage
usage.tsx
1import { CodeBlock } from "@/components/ai/code-block";
2
3<CodeBlock
4 filename="app/page.tsx"
5 language="tsx"
6 highlightLines={[3]}
7 code={`export default function Page() {
8 return <h1>Hello</h1>;
9}`}
10/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
code* | string | — | Source to show and copy. |
language | string | "tsx" | Label and highlighting rules (tsx, ts, js, json, bash, css, python…). |
filename | string | — | Shown in the header. |
showLineNumbers | boolean | true | Gutter with line numbers. |
highlightLines | number[] | — | 1-based lines to highlight. |
maxLines | number | 14 | Collapse longer code behind “Show all”. 0 disables. |
defaultExpanded | boolean | false | Start expanded. |
hideCopy | boolean | — | Hide the copy button. |
Accessibility
- The scroll area is focusable so keyboard users can scroll long lines.
- Line numbers are aria-hidden so copied or read text stays clean.
- The collapse toggle uses aria-expanded and aria-controls.