CodeBlock

A compound code block component with syntax highlighting, multi-file tabs, copy button, and customizable themes.

Installation

CLI

Dependencies

This component requires the following npm packages:

Registry Dependencies

This component also requires: utils

Usage

CodeBlock is a compound component for rendering syntax-highlighted code with optional file navigation and a copy button.

You provide a data array. Each item must have a unique value. Use filename for display, and optionally set language to control Shiki highlighting.

Examples

Multi-file with Tabs

Display multiple files with tab navigation.

With Line Numbers

Enable line numbers across all items with theshowLineNumbers prop.

With Dropdown Select

Use the select sub-components for a dropdown file picker (useful for narrow layouts when tabs would overflow).

With Footer

TypeScript example showing a simple greeting

API Reference

CodeBlock Props

Prop	Type	Default	Description
`data*`	`CodeBlockData[]`	-	Array of code items with value, filename, code, and language.
`defaultValue`	`string`	-	The default active item value.
`showLineNumbers`	`boolean`	`false`	Show line numbers in all code content.
`theme`	`{ light: string; dark: string }`	`{ light: "github-light", dark: "github-dark" }`	Shiki theme for syntax highlighting.

CodeBlockData Type

Prop	Type	Default	Description
`value*`	`string`	-	Unique identifier for the code item.
`filename`	`string`	-	Display name for the file tab.
`code*`	`string`	-	The code string to highlight.
`language`	`string`	-	Language for syntax highlighting. Defaults to value.

Sub-components

CodeBlock is designed as a compound component so you can choose the UI that fits your page (tabs, dropdown, footer, etc.).

CodeBlockHeader wraps navigation and actions.
CodeBlockFiles +CodeBlockFilename render tab navigation.
CodeBlockSelect + relatedCodeBlockSelect* components render a dropdown picker.
CodeBlockCopyButton copies the active file.
CodeBlockBody maps items →CodeBlockItem panels.
CodeBlockContent renders the highlighted HTML.
CodeBlockFooter adds optional descriptive text.

Most sub-components accept standard DOM props for their underlying element. For exact types and slots, see the source below.