AI-generated code shown with syntax highlighting and a copy action, ready to use — here featured in a reply with the high-emphasis Brand style.
Loading demo: ai-code-block-real-world
npx sdaia-ui@latest add ai-code-block
import { AiCodeBlock } from "sdaia-ui"1<AiCodeBlock2fileName="response.ts"3code={`const res = await fetch(url, { method: "POST" });4return res.json();`}5collapsible6defaultCollapsed7collapsedVisibleLines={2}8/>
The full code shown with syntax highlighting and a copy action.
Loading demo: ai-code-block-default
A long snippet collapsed to a compact summary with a “Show N more lines” expander.
Loading demo: ai-code-block-collapsed
Prop | Type | Default | Required |
|---|---|---|---|
variant | 'neutral' | 'brand' | 'outline' | 'neutral' | optional |
fileName | ReactNode | — | optional |
code | string | — | optional |
lines | ReactNode[] | — | optional |
showCopy | boolean | true | optional |
copyLabel | string | 'Copy code' | optional |
copiedLabel | string | 'Copied' | optional |
onCopy | (code: string) => void | Promise<void> | — | optional |
collapsible | boolean | false | optional |
collapsed | boolean | — | optional |
defaultCollapsed | boolean | false | optional |
onCollapsedChange | (collapsed: boolean) => void | — | optional |
collapsedVisibleLines | number | 2 | optional |
hiddenLineCount | number | — | optional |
showMoreLabel | ReactNode | ((n: number) => ReactNode) | (n) => `Show ${n} more lines` | optional |
dir | 'ltr' | 'rtl' | 'ltr' | optional |
as | ElementType | 'div' | optional |