caliper uidocs
DemoSign inGet Pro

Code block

Free

Syntax-highlighted code with a language label and a copy button.

Installs components/ui/code-block.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/code-block.json
tsx
export function Greeting({ name }: { name: string }) {  return <p>Hello, {name}.</p>;}

When to use #

Use it for

  • Showing a snippet, command or config the reader may copy.
  • You need optional line numbers.

Skip it when

  • The content is a diff; use the file diff.
  • It is inline code inside a sentence.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/code-block.json

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above. It is built from CodeBlock, highlightCode and copyText.

example.tsx
import { CodeBlock } from "@/components/ui/code-block"

export function CodeBlockDemo() {
  return (
    <CodeBlock
      language="tsx"
      lineNumbers={false}
      code={`export function Greeting({ name }: { name: string }) {
  return <p>Hello, {name}.</p>;
}`}
    />
  );
}

API reference #

CodeBlock

component
PropTypeDefaultDescription
codestring—
languageCodeLanguage"text"
titlestring—A filename or short caption shown in the header.
variantsreadonly CodeVariant[]—Alternatives of the same snippet, such as package managers. Replaces `code`.
lineNumbersbooleanfalse
highlightreadonly number[][]1-based line numbers to emphasize.
collapsedLinesnumber—Show only this many lines until the reader expands.
wrapbooleanfalse
streamingbooleanfalseThe code is still arriving: shows a caret, follows the newest line and holds Copy until it is whole.
maxHeightstring—Any CSS height. Taller code scrolls inside the block.
labelstring—
classNamestring—

highlightCode

component

No props of its own; it accepts the native props of its root element.

copyText

component

No props of its own; it accepts the native props of its root element.

Accessibility #

It exposes tablist, tab and status semantics, with aria-busy, aria-label, aria-selected, aria-hidden and aria-expanded kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour
→Moves to the next item or value.
←Moves to the previous item or value.
HomeJumps to the first item or the minimum.
EndJumps to the last item or the maximum.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.