Command Palette

Search for a command to run...

Code Block

A powerful code block component with syntax highlighting, file tabs, and copy functionality.

Code Block
example.js
console.log("Hello World!");

import { CodeBlock, CodeBlockBody, CodeBlockContent, CodeBlockCopyButton, CodeBlockFilename, CodeBlockFiles, CodeBlockHeader, CodeBlockItem } from "@/components/optics/code-block";const demoData = [	{		language: "js",		filename: "example.js",		code: `console.log("Hello World!");`,	},];<div className="w-full">  <CodeBlock    data={[      {        code: 'console.log("Hello World!");',        filename: 'example.js',        language: 'js'      }    ]}    defaultValue="example.js"  >    <CodeBlockHeader>      <CodeBlockFiles />      <CodeBlockCopyButton />    </CodeBlockHeader>    <CodeBlockBody />  </CodeBlock></div>

Installation

pnpm dlx shadcn@latest add @optics/code-block

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")
render
React.ReactElement
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)
CheckboxCode Snippet