Loading…

Code Block

A block of code with a copy control, line numbers and highlighted lines, re-shaded from a single accent colour — ready for any highlighter.

Data
1 file
1 npm package
Accessibility notes

Playground

Installation

The CLI installs copy-button as well, because this component imports it. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add code-block

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

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

Examples

Every example the tests run, live and operable, side by side.

Default
With Filename
Without Copy
Overflowing
Pre Highlighted
Accent
Line Numbers
Line Numbers On Markup
Without Header
Bare

API

Generated from the component's own types, so a prop cannot appear here without existing.

<CodeBlock>

Prop	Type	Default
`accent` Any CSS colour. The surface, border, header, text, line numbers and highlights are all mixed from it and the theme, in light and dark mode.	`string`	—
`code` The source code. Rendered when there are no children, and always what the copy button puts on the clipboard. Required when children are rendered markup, because reading text back out of highlighted DOM loses whitespace in ways that break pasted code. It also gives line numbers their count on the first paint.	`string`	—
`frame`	`boolean`	`true`
`hideCopy` Hides the copy control.	`boolean`	—
`highlightLines` 1-based line numbers to mark with a soft wash of the accent.	`number[]`	—
`language` Shown in the header and used as the language hint.	`string`	—
`showHeader` Shows the header bar. By default it shows when there is a title, a language or a copy control. Without it, the copy control floats over the top corner. Always off when `frame` is false.	`boolean`	—
`showLineNumbers` A gutter of line numbers. They cannot be selected or copied, and are hidden from assistive technology.	`boolean`	`false`
`title` Filename or other caption for the header.	`string`	—

Plus every attribute of <div>.

Accessibility

The pre is a focusable named region, since code overflows horizontally and an unfocusable scroll box is unreachable by keyboard. Copying is announced through a polite live region as well as shown, and a refused clipboard write reports failure rather than looking like success. Line numbers are drawn by pseudo-elements in an aria-hidden, unselectable gutter, so they are never read, selected or copied; highlighted lines are an aria-hidden wash, so a line's emphasis must also be explained in the surrounding text when it matters. An accent is mixed into the theme's own foreground and background to hold contrast, but a very light or very dark accent should still be checked.

Quality

Measured from the source and its tests at build time.

All scores

8/9

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — fails
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Prop

Type

Default

accent

Any CSS colour. The surface, border, header, text, line numbers and highlights are all mixed from it and the theme, in light and dark mode.

string

—

code

The source code. Rendered when there are no children, and always what the copy button puts on the clipboard. Required when children are rendered markup, because reading text back out of highlighted DOM loses whitespace in ways that break pasted code. It also gives line numbers their count on the first paint.

string

—

frame

boolean

true

hideCopy

Hides the copy control.

boolean

—

highlightLines

1-based line numbers to mark with a soft wash of the accent.

number[]

—

language

Shown in the header and used as the language hint.

string

—

showHeader

Shows the header bar. By default it shows when there is a title, a language or a copy control. Without it, the copy control floats over the top corner. Always off when frame is false.

boolean

—

showLineNumbers

A gutter of line numbers. They cannot be selected or copied, and are hidden from assistive technology.

boolean

false

title

Filename or other caption for the header.

string

—