Code block

Shows source text with optional line numbers, wrapping, and copy feedback.

Preview

JavaScript

const total = 42;

In action

TypeScript

1const range = 386;
2const unit = "km";

When to use

Use it for

Installation commands, code samples, and technical documents.

Not for

Comparing revisions; use DiffViewer.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { CodeBlock } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/code-block.

2. Vendor the source

npx @noorddev/vlak-cli add code-block

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/code-block.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { CodeBlock } from "@noorddev/vlak-react";

<CodeBlock language="TypeScript" code={"const range = 386;\nconst unit = \"km\";"} lineNumbers />

Props

CodeBlock

Plain source with optional numbering and honest asynchronous copy feedback.

Prop	Type	Default
`code`required	`string`
`language`	`string`	`"Text"`
`lineNumbers`	`boolean`	`false`
`wrap`	`boolean`	`false`
`copyable`	`boolean`	`true`
`onCopyCode`	`(code: string) => void \| Promise<void>`

Also accepts HTMLAttributes<HTMLElement>.

Keyboard

Keys	Does
`Tab, Enter, Space`	Tab reaches the copy action and scrollable source; Enter or Space copies.

Accessibility

Line numbers are decorative. Copy completion and failure are announced only after the operation resolves.

Markup

<figure class="rs-code-block"><figcaption class="rs-code-block-header">TypeScript</figcaption><pre class="rs-code-block-pre" tabindex="0" aria-label="TypeScript source"><code>const range = 386;</code></pre></figure>

Classes

.rs-code-block.rs-code-block-header.rs-code-block-pre.rs-code-block-wrap.rs-code-block-line.rs-code-block-number.rs-code-block-status

Depends on

/button