║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: CodeBlock description: Syntax-highlighted codeblock component built on top of react-syntax-highlighter.

<ComponentPreview name="codeblock-demo" className="" description="" />

Installation

<Tabs defaultValue="cli" className="w-full"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> <PkgOptions name="codeblock" /> </TabsContent> <TabsContent value="manual"> <Steps>

<Step>Install the following dependencies:</Step> <DepsOptions name="react-syntax-highlighter @types/react-syntax-highlighter" />

<Step>Copy and paste the following code into your project.</Step>

<p> <code>codeblock.tsx</code> </p> <ComponentSource name="codeblock" /> </Steps> </TabsContent> </Tabs>

Usage

import { CodeBlock } from "@/components/ui/codeblock";

<CodeBlock
  language="typescript"
  filename="main.tsx"
  tabs={[
    { name: 'api.ts', code: "fetchData()" },
    { name: 'styles.css', code: ".card { padding: 1rem }", language: 'css' }
  ]}
  breadcrumb={['src', 'components']}
/>

Examples

---

<Step>CodeBlock with Light theme</Step>

<ComponentPreview name="codeblocklight" className="" description="" />

---

<Step>CodeBlock with Multitabs</Step>

<ComponentPreview name="codeblockmultitab" className="" description="" />

API Reference

CodeBlock

Syntax-highlighted code block with tabs, stats, and file navigation.

Props

<PropsTable rows={[ { prop: "language", type: "string", default: "required", description: "Language for syntax highlighting. Required if tabs not used." }, { prop: "filename", type: "string", default: "required", description: "Displayed filename above the code block." }, { prop: "code", type: "string", default: "required (if no tabs)", description: "Code string to display. Required if tabs not provided." }, { prop: "tabs", type: "Array<{ name: string; code: string; language?: string }>", default: "required (if no code)", description: "Array of tabbed code blocks. Each must include a name and code." }, { prop: "highlightLines", type: "number[]", default: "[]", description: "Lines to highlight in the code block." }, { prop: "breadcrumb", type: "string[]", default: "[]", description: "Optional breadcrumb text shown above filename." }, { prop: "showStats", type: "boolean", default: "true", description: "Toggles file stats UI (like file size, lines, etc.)." }, { prop: "theme", type: "dark" | "light", default: "dark", description: "Color theme for the code block." } ]} />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║