CodeBlock

Read-only source code display.

Examples

Basic

user.ts

Copy code

type User = {  id: string;  name: string;};​export function formatUser(user: User): string {  return `${user.name} (${user.id})`;}

<CodeBlock
  code="type User = {\n  id: string;\n  name: string;\n};\n\nexport function formatUser(user: User): string {\n  return `${user.name} (${user.id})`;\n}"
  title="user.ts"
/>

With Line Numbers

user.ts

Copy code

1

2

3

4

5

6

7

8

type User = {  id: string;  name: string;};​export function formatUser(user: User): string {  return `${user.name} (${user.id})`;}

<CodeBlock
  code="type User = {\n  id: string;\n  name: string;\n};\n\nexport function formatUser(user: User): string {\n  return `${user.name} (${user.id})`;\n}"
  title="user.ts"
  hasLineNumbers
/>

Highlighted Lines

user.ts

Copy code

1

2

3

4

5

6

7

8

type User = {  id: string;  name: string;};​export function formatUser(user: User): string {  return `${user.name} (${user.id})`;}

<CodeBlock
  code="type User = {\n  id: string;\n  name: string;\n};\n\nexport function formatUser(user: User): string {\n  return `${user.name} (${user.id})`;\n}"
  title="user.ts"
  hasLineNumbers
  highlightLines={[5, 6, 7]}
/>

Wrapped

user.ts

Copy code

const message = "This is a deliberately long line of code that wraps within the available container width instead of forcing horizontal scrolling.";

<CodeBlock
  code="const message = \"This is a deliberately long line of code that wraps within the available container width instead of forcing horizontal scrolling.\";"
  title="user.ts"
  isWrapped
  width="100%"
/>

Without Copy Button

user.ts

type User = {  id: string;  name: string;};​export function formatUser(user: User): string {  return `${user.name} (${user.id})`;}

<CodeBlock
  code="type User = {\n  id: string;\n  name: string;\n};\n\nexport function formatUser(user: User): string {\n  return `${user.name} (${user.id})`;\n}"
  title="user.ts"
  hasCopyButton={false}
/>

Scrollable Max Height

user.ts

Copy code

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

const item1 = { id: "1", label: "Navigation item 1" };const item2 = { id: "2", label: "Navigation item 2" };const item3 = { id: "3", label: "Navigation item 3" };const item4 = { id: "4", label: "Navigation item 4" };const item5 = { id: "5", label: "Navigation item 5" };const item6 = { id: "6", label: "Navigation item 6" };const item7 = { id: "7", label: "Navigation item 7" };const item8 = { id: "8", label: "Navigation item 8" };const item9 = { id: "9", label: "Navigation item 9" };const item10 = { id: "10", label: "Navigation item 10" };const item11 = { id: "11", label: "Navigation item 11" };const item12 = { id: "12", label: "Navigation item 12" };const item13 = { id: "13", label: "Navigation item 13" };const item14 = { id: "14", label: "Navigation item 14" };const item15 = { id: "15", label: "Navigation item 15" };const item16 = { id: "16", label: "Navigation item 16" };const item17 = { id: "17", label: "Navigation item 17" };const item18 = { id: "18", label: "Navigation item 18" };const item19 = { id: "19", label: "Navigation item 19" };const item20 = { id: "20", label: "Navigation item 20" };const item21 = { id: "21", label: "Navigation item 21" };const item22 = { id: "22", label: "Navigation item 22" };const item23 = { id: "23", label: "Navigation item 23" };const item24 = { id: "24", label: "Navigation item 24" };

<CodeBlock code={longCode} title="user.ts" hasLineNumbers maxHeight={220} />

Small

user.ts

Copy code

type User = {  id: string;  name: string;};​export function formatUser(user: User): string {  return `${user.name} (${user.id})`;}

<CodeBlock
  code="type User = {\n  id: string;\n  name: string;\n};\n\nexport function formatUser(user: User): string {\n  return `${user.name} (${user.id})`;\n}"
  title="user.ts"
  size="sm"
/>

Empty

empty.txt

Copy code

​

<CodeBlock code="" title="empty.txt" />

Long Single Line

request.ts

Copy code

const response = await fetch("/api/search?query=component-library-code-block-horizontal-scroll&includeArchived=false&sort=updated_at&direction=desc&limit=100");

<CodeBlock code={longSingleLine} title="request.ts" />

Without Header

type User = {  id: string;  name: string;};​export function formatUser(user: User): string {  return `${user.name} (${user.id})`;}

Copy code

<CodeBlock
  code="type User = {\n  id: string;\n  name: string;\n};\n\nexport function formatUser(user: User): string {\n  return `${user.name} (${user.id})`;\n}"
  title={undefined}
/>

Section Container

user.ts

Copy code

1

2

3

4

5

6

7

8

type User = {  id: string;  name: string;};​export function formatUser(user: User): string {  return `${user.name} (${user.id})`;}

<CodeBlock
  code="type User = {\n  id: string;\n  name: string;\n};\n\nexport function formatUser(user: User): string {\n  return `${user.name} (${user.id})`;\n}"
  title="user.ts"
  container="section"
  hasLineNumbers
  width="100%"
/>

Width Comparison

fit-content.ts

Copy code

type User = {  id: string;  name: string;};​export function formatUser(user: User): string {  return `${user.name} (${user.id})`;}

full-width.ts

Copy code

type User = {  id: string;  name: string;};​export function formatUser(user: User): string {  return `${user.name} (${user.id})`;}

<div style={{display: 'grid', gap: 16}}>
  <CodeBlock {...args} title="fit-content.ts" width="fit-content" />
  <CodeBlock {...args} title="full-width.ts" width="100%" />
</div>

Inline

npm install silver-ui

Copy code

<CodeBlock
  code="npm install silver-ui"
  title={undefined}
  container="inline"
  label="Install silver-ui"
/>

API

CodeBlock

Read-only source code display.

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the root element.
code*	string	—	Source code to display.
container	"card" | "section" | "inline"	'card'	Container presentation style. Use 'inline' for a compact, single-line snippet (e.g. an install command) with the copy button rendered inline; line numbers, titles, and maxHeight do not apply to inline blocks.
data-testid	string	—	Test ID applied to the root element.
hasCopyButton	boolean	true	Whether to show a copy button.
hasLineNumbers	boolean	false	Whether to render line numbers.
highlightLines	number[]	—	One-based line numbers to visually highlight.
isWrapped	boolean	false	Whether long lines should wrap.
label	string	—	Accessible label for the code block.
maxHeight	number | string	—	Maximum scrollable body height. Numbers are treated as pixels.
onCopy	() => void	—	Called after code is successfully copied.
padding	0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10	4	Inner padding step.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the root element.
size	"sm" | "md"	'md'	Visual size.
style	CSSProperties	—	Inline styles applied to the root element.
title	string	—	Optional header title.
width	string	'fit-content'	Width of the code block. Accepts any CSS width value.