Code Block · paneui

lib/greet.tsts

export function greet(name: string) {
  const time = new Date().getHours()
  const part = time < 12 ? "morning" : "evening"
  return `Good ${part}, ${name}.`
}

Installation

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

Usage

import { CodeBlock, CodeGroup } from "@/components/ui/code-block"

// html: a <pre> highlighted at build time with a light and a dark theme
<CodeBlock title="lib/greet.ts" language="ts" html={html} lineNumbers />

<CodeGroup storageKey="framework">
  <CodeBlock title="app/page.tsx" html={page} />
  <CodeBlock title="app/layout.tsx" html={layout} />
</CodeGroup>

Composition

CodeGroup
└── CodeBlock

Examples

Code Group

Use a group when the same step has several files or variants.

Remember the Tab

Highlighted Lines

Without Title

Use a bare block for short commands; the copy button shows on hover.

Markup as Children

Input

The block never highlights in the browser. Give it markup highlighted at build time, as an html string or as children. Dual-theme output that puts --shiki-light and --shiki-dark on the <pre> and its spans follows the .dark class; output with inline light colours plus --shiki-dark works too. Only pass trusted build output to html.

Lines

Lines are the .line spans of the output. lineNumbers numbers them with CSS counters, so copying skips the numbers. Transformer classes are styled: .line.highlighted, .line.diff.add, .line.diff.remove, .has-focused .line:not(.focused) and .highlighted-word.

In a content pipeline

Map your pre to a CodeBlock: pre: ({ "data-title": title, "data-language": language, ...props }) => <CodeBlock title={title} language={language}><pre {...props} /></CodeBlock>. A CodeBlock inside a typeset container keeps its own styles.

Copy

The copy button copies the text of the <pre>. In a group it copies the open tab.

API Reference

CodeBlock

Frame with an optional title bar. Inside a CodeGroup it renders only its code; the group owns the frame. Also accepts every prop of div.

html: string; Highlighted markup, usually a whole <pre>.
children: ReactNode; Highlighted elements, used when html is not set.
title: ReactNode; Title bar text, usually a file name. Also the tab label (and, as a string, the tab value) in a group.
language: string; Label in the title bar; picks the icon when title is not a file name.
icon: ReactNode | false; Title bar icon. Defaults to the file-type icon from getFileKind; false hides it.
lineNumbers= false: boolean; Number the lines.
wrap= false: boolean; Wrap long lines instead of scrolling sideways.
copyable= true: boolean; Show the copy button.
maxHeight: number | string; Height after which the code scrolls.

Prop	Type	Default	Description
html	string	—	Highlighted markup, usually a whole `<pre>`.
children	ReactNode	—	Highlighted elements, used when `html` is not set.
title	ReactNode	—	Title bar text, usually a file name. Also the tab label (and, as a string, the tab value) in a group.
language	string	—	Label in the title bar; picks the icon when `title` is not a file name.
icon	ReactNode \| false	—	Title bar icon. Defaults to the file-type icon from `getFileKind`; `false` hides it.
lineNumbers	boolean	false	Number the lines.
wrap	boolean	false	Wrap long lines instead of scrolling sideways.
copyable	boolean	true	Show the copy button.
maxHeight	number \| string	—	Height after which the code scrolls.

data-line-numbers: On code-block-content while lineNumbers is set.

Data attribute	Description
data-line-numbers	On `code-block-content` while `lineNumbers` is set.

CodeGroup

Tabs of CodeBlocks in one frame. Also accepts every prop of div.

value: string; Controlled tab (a block's string title, else its language).
defaultValue: string; First tab shown. Defaults to the first block.
onValueChange: (value: string) => void; Called when the tab changes.
storageKey: string; Remember the tab in localStorage and switch every group with the same key together.
copyable= true: boolean; Show the copy button.

Prop	Type	Default	Description
value	string	—	Controlled tab (a block's string `title`, else its `language`).
defaultValue	string	—	First tab shown. Defaults to the first block.
onValueChange	(value: string) => void	—	Called when the tab changes.
storageKey	string	—	Remember the tab in `localStorage` and switch every group with the same key together.
copyable	boolean	true	Show the copy button.

CodeCopyButton

The copy button on its own. value is a string or a function that returns one.

value*: string | (() => string); Text to copy.
label= "Copy code": string; Accessible label.

Prop	Type	Default	Description
value*	string \| (() => string)	—	Text to copy.
label	string	"Copy code"	Accessible label.