Code Block

debounce.ts

export function debounce(fn, wait) {  let timer;  return (...args) => {    clearTimeout(timer);    timer = setTimeout(() => fn(...args), wait);  };}

Installation

Copy the source into components/ui/code-block.tsx. Registry items that depend on it install it automatically.

components/ui/code-block.tsx

Usage

The component is the chrome; pass it a pre element, highlighted or plain. In MDX every fenced code block on this site renders through it.

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

export function Example() {
  return (
    <CodeBlock title="example.ts">
      <pre>
        <code>{'const answer = 42;'}</code>
      </pre>
    </CodeBlock>
  );
}

Examples

Without a title

When there is no header, the copy button floats in the corner and appears on hover.

npx assistant-ui init

API Reference

CodeBlock

CodeBlockProps

title ?: ReactNode: Header label, usually the file name. Without it the copy button floats in the corner.
viewportClassName ?: string: Classes for the scrollable code region, e.g. a max height.
copyText ?: string: Text for the copy button; defaults to the rendered code's text.
className ?: string: Additional CSS classes on the outer figure.

Lines marked .highlighted by the highlighter get the blue gutter bar, and data-line-numbers on the pre turns on the counter gutter. In dark mode each token falls back to its --shiki-dark variable.