Code Block
A powerful code block component with syntax highlighting, file tabs, and copy functionality.
Installation
Props
<CodeBlock />
Name
Type
className
string
data
Array<{ language: string, filename: string, code: string }> (required)
value
string
defaultValue
string
onValueChange
(value: string) => void
<CodeBlockHeader />
Name
Type
className
string
<CodeBlockBody />
Name
Type
children
(item: { language: string, filename: string, code: string }) => React.ReactNode
<CodeBlockContent />
Name
Type
children
string (required)
language
string
themes
{ light: string, dark: string }
syntaxHighlighting
boolean (default: true)
className
string
<CodeBlockItem />
Name
Type
className
string
value
string (required)
lineNumbers
boolean (default: true)
children
React.ReactNode (required)
<CodeBlockCopyButton />
Name
Type
className
string
variant
"default" | "outline" | "ghost" | "destructive" | "secondary" | "info" | "success" | "warning" | "muted" | "raised" | "link" (default: "outline")
size
"default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" (default: "icon")
asChild
boolean
timeout
number (default: 2000)
onCopy
() => void
onError
(error: Error) => void
<CodeBlockFiles />
Name
Type
className
string
children
(item: { language: string, filename: string, code: string }) => React.ReactNode
<CodeBlockFilename />
Name
Type
className
string
value
string (required)
icon
React.ComponentType
children
React.ReactNode (required)