SDAIA

AI Code Block

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

Installation

npx sdaia-ui@latest add ai-code-block

Usage

import { AiCodeBlock } from "sdaia-ui"
1<AiCodeBlock
2  fileName="response.ts"
3  code={`const res = await fetch(url, { method: "POST" });
4return res.json();`}
5  collapsible
6  defaultCollapsed
7  collapsedVisibleLines={2}
8/>

States

Default

The full code shown with syntax highlighting and a copy action.

Loading demo: ai-code-block-default

Collapsed

A long snippet collapsed to a compact summary with a “Show N more lines” expander.

Loading demo: ai-code-block-collapsed

API Reference

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