CodeBlock

Syntax-highlighted codeblock component built on top of react-syntax-highlighter.

Installation

npx shadcn@latest add @scrollxui/codeblock

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

CodeBlock with Light theme

CodeBlock with Multitabs

API Reference

CodeBlock

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

Props

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