Code Block

A code sample with syntax colors from the tokens, a copy button that's always visible, line numbers and diff lines. For a key, use Kbd; for a word of code in a sentence, use <code>.

Sourcecomponents/code-block.tsx

Highlighted, with a title and copy

save.tsx

import { Button } from "@/components/button";
// A primary action, 44px tall by default.export function Save({ busy }: { busy: boolean }) {  return (    <Button loading={busy} onClick={() => save(42)}>      Save changes    </Button>  );}

Line numbers and a diff

price.tsx

export function Price({ amount }: { amount: number }) {  return <p>${amount}</p>;  return <p className="tabular-nums">{money.format(amount)}</p>;}
const money = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });

Small, wrapping, no header

pnpm add @tanstack/react-table@9.3.1 recharts@3.8.0 react-is@19.2.8 embla-carousel-react@8.6.0 shiki@4.5.0 --save-exact

Usage

Code Block usage

import { CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, useHighlightedCode } from "@/components/code-block";
export function CodeBlockUsage({ code }: { code: string }) {  const lines = useHighlightedCode(code, "tsx");  return (    <CodeBlock>      <CodeBlockHeader>        <CodeBlockTitle>save.tsx</CodeBlockTitle>        <CodeBlockActions>          <CodeBlockCopyButton value={code} />        </CodeBlockActions>      </CodeBlockHeader>      <CodeBlockContent lineNumbers>        {lines.map((line, index) => (          <CodeBlockLine key={index}>{line}</CodeBlockLine>        ))}      </CodeBlockContent>    </CodeBlock>  );}

When to use

Use when

A code sample, a command, or a diff, with useHighlightedCode for syntax colors, a copy button, lineNumbers and line variants. Requires shiki

Don’t use when

A key or shortcut (use Kbd); a word of code inside a sentence (use <code>); an editable code field (use Textarea)