Code Block

Syntax-highlighted code with optional filename, line numbers, and copy.

Default

TypeScript sample with filename and line numbers

example.ts

1export function greet(name: string) {
2  return `Hello, ${name}!`;
3}

default-example.tsx

1"use client";
2
3import { CodeBlock } from "@/registry/ui";
4
5export function CodeBlockDefaultExample() {
6  return (
7    <div className="mx-auto w-full max-w-2xl text-left">
8      <CodeBlock
9        showCopyButton={false}
10        language="typescript"
11        filename="example.ts"
12        code={
13          "export function greet(name: string) {\n  return `Hello, ${name}!`;\n}"
14        }
15      />
16    </div>
17  );
18}

JavaScript without line numbers

No filename and no line numbers

javascript

const sum = (a, b) => a + b;
console.log(sum(1, 2));

javascript-example.tsx

1"use client";
2
3import { CodeBlock } from "@/registry/ui";
4
5export function CodeBlockJavascriptExample() {
6  return (
7    <div className="mx-auto w-full max-w-xl text-left">
8      <CodeBlock
9        showCopyButton={false}
10        language="javascript"
11        showLineNumbers={false}
12        code={"const sum = (a, b) => a + b;\nconsole.log(sum(1, 2));"}
13      />
14    </div>
15  );
16}

Installation & source

Install via the shadcn CLI or copy the registry files manually.

bash

npx shadcn@latest add @tt-ui/code-block

Props

Name	Type	Default	Description
code	string	Required	Source text to highlight and copy
language	string	"typescript"	Prism language id for highlighting
filename	string	-	Optional label in the header (hides language chip when set)
showLineNumbers	boolean	true	Show gutter line numbers