Code Block

FreeNew

A code panel with a filename header, line numbers, line highlights, wrap toggle and copy button, plus a tabbed variant for several files.

The full demo as documented.

Customize

Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.

code

children

filename

language

lineNumbers

wrap

wrapToggle

copyable


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/code-block.json

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

<CodeBlock
  filename="app/page.tsx"
  language="tsx"
  code={code}
  lineNumbers
  highlight={[3]}
/>

Prop	Type	Default	Description
`code`	`string`	-	Source as plain text. Also what the copy button copies.
`children`	`ReactNode`	-	Pre-highlighted markup (for example from Shiki) used instead of `code`.
`filename`	`string`	-	Shown in the header.
`language`	`string`	-	Language label shown in the header.
`lineNumbers`	`boolean`	`false`	Show line numbers.
`highlight`	`number[]`	`[]`	1-based lines to highlight (plain `code` only).
`wrap`	`boolean`	`false`	Wrap long lines instead of scrolling.
`wrapToggle`	`boolean`	`false`	Show a button that toggles wrapping.
`copyable`	`boolean`	`true`	Show the copy button.
`bodyClassName`	`string`	-	Classes for the scrolling body, such as a max height.

Also accepts all <div> props except children.

Prop	Type	Default	Description
`files`	`CodeBlockFile[]`	-	One tab per file: `filename`, `code`, and optional `language`, `highlight`, `children`.
`defaultValue`	`string`	-	Filename of the tab open at first.
`value`	`string`	-	Controlled open tab.
`onValueChange`	`(filename: string) => void`	-	Called with the newly selected filename.
`lineNumbers`	`boolean`	`false`	Show line numbers.
`wrap`	`boolean`	`false`	Wrap long lines.
`copyable`	`boolean`	`true`	Show the copy button for the open file.
`bodyClassName`	`string`	-	Classes for each scrolling body.

The block does not highlight syntax itself. Pass highlighted markup as children and the plain text as code.
Lines are rendered as <span class="line">, the structure Shiki emits, so line numbers work for both.

Guide and examples


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/code-block.json

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

<CodeBlock
  filename="app/page.tsx"
  language="tsx"
  code={code}
  lineNumbers
  highlight={[3]}
/>

Prop	Type	Default	Description
`code`	`string`	-	Source as plain text. Also what the copy button copies.
`children`	`ReactNode`	-	Pre-highlighted markup (for example from Shiki) used instead of `code`.
`filename`	`string`	-	Shown in the header.
`language`	`string`	-	Language label shown in the header.
`lineNumbers`	`boolean`	`false`	Show line numbers.
`highlight`	`number[]`	`[]`	1-based lines to highlight (plain `code` only).
`wrap`	`boolean`	`false`	Wrap long lines instead of scrolling.
`wrapToggle`	`boolean`	`false`	Show a button that toggles wrapping.
`copyable`	`boolean`	`true`	Show the copy button.
`bodyClassName`	`string`	-	Classes for the scrolling body, such as a max height.

Also accepts all <div> props except children.

Prop	Type	Default	Description
`files`	`CodeBlockFile[]`	-	One tab per file: `filename`, `code`, and optional `language`, `highlight`, `children`.
`defaultValue`	`string`	-	Filename of the tab open at first.
`value`	`string`	-	Controlled open tab.
`onValueChange`	`(filename: string) => void`	-	Called with the newly selected filename.
`lineNumbers`	`boolean`	`false`	Show line numbers.
`wrap`	`boolean`	`false`	Wrap long lines.
`copyable`	`boolean`	`true`	Show the copy button for the open file.
`bodyClassName`	`string`	-	Classes for each scrolling body.

The block does not highlight syntax itself. Pass highlighted markup as children and the plain text as code.
Lines are rendered as <span class="line">, the structure Shiki emits, so line numbers work for both.