Code Block

Editor-style code block with syntax highlighting, line numbers, copy button, and dark mode.

Installation

npx shadcn@latest add @iconiq/code-block

File Structure

Usage

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

const snippet = `export async function getUser(id: string) {
  const res = await fetch(\`/api/users/\${id}\`);
  return res.json();
}`;

export function Example() {
  return (
    <CodeBlock
      code={snippet}
      filename="get-user.ts"
      language="ts"
      highlightLines={[2]}
      onCopy={(code) => console.log("copied", code.length)}
    />
  );
}

Props

Description

CodeBlock

code

Source code to render. Leading and trailing blank lines are trimmed before display; copying always writes the original string.

Type string

language

Language shown in the bottom status bar, e.g. `ts` or `python`, and used to pick the tab accent dot color. Purely presentational — the built-in highlighter is language-agnostic. Omit to show only the line count.

Type string

filename

Filename rendered inside the editor-style tab at the top. Omit to skip the tab strip entirely — the copy button then floats over the code, still top right.

Type string

icon

Optional icon rendered in the tab in place of the accent dot, e.g. a framework logo. SVG children are sized to 14px automatically.

Type ReactNode

showLineNumbers

Render the line-number gutter. Numbers stay pinned to the left edge while long lines scroll horizontally.

Type boolean·Default true

highlightLines

1-based line numbers to emphasize. Highlighted rows get an indigo-tinted background and a left accent bar.

Type number[]

maxHeight

Max body height before the code scrolls vertically. Accepts a pixel number or any CSS length.

Type number | string·Default 384

onCopy

Called with the code after it has been written to the clipboard.

Type (code: string) => void

className

Extra classes for the outer shell.

Type string

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: motion, lucide-react.

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.

use-debounce.ts

1export function useDebounce<T>(value: T, delay = 300) {
2  const [debounced, setDebounced] = useState(value);
3
4  useEffect(() => {
5    const timer = setTimeout(() => setDebounced(value), delay);
6    return () => clearTimeout(timer);
7  }, [value, delay]);
8
9  return debounced;
10}

ts10 lines