Code Block

Syntax-highlighted code block with tabs, line highlighting, and copy button

example.ts

function greet(name: string) {
  const message = `Hello, ${name}!`;
  console.log(message);
}

greet("World");

"use client";

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

export function CodeBlockExample() {
  return (
    <div className="flex items-center justify-center p-8">
      <div className="w-full max-w-lg">
        <CodeBlock
          language="typescript"
          filename="example.ts"
          highlightLines={[2, 3]}
          code={`function greet(name: string) {
  const message = \`Hello, \${name}!\`;
  console.log(message);
}

greet("World");`}
        />
      </div>
    </div>
  );
}

Installation


pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/code-block"

Dependencies


pnpm add react-syntax-highlighter @tabler/icons-react

Examples

Tabs

import { greet } from "./utils";

greet("World");

"use client";

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

export function CodeBlockTabsExample() {
  return (
    <div className="flex items-center justify-center p-8">
      <div className="w-full max-w-lg">
        <CodeBlock
          language="typescript"
          filename="multi-tab"
          tabs={[
            {
              name: "index.ts",
              code: `import { greet } from "./utils";\n\ngreet("World");`,
              language: "typescript",
            },
            {
              name: "utils.ts",
              code: `export function greet(name: string) {\n  console.log(\`Hello, \${name}!\`);\n}`,
              language: "typescript",
              highlightLines: [2],
            },
          ]}
        />
      </div>
    </div>
  );
}

"use client";

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

export function CodeBlockTabsExample() {
  return (
    <div className="flex items-center justify-center p-8">
      <div className="w-full max-w-lg">
        <CodeBlock
          language="typescript"
          filename="multi-tab"
          tabs={[
            {
              name: "index.ts",
              code: `import { greet } from "./utils";\n\ngreet("World");`,
              language: "typescript",
            },
            {
              name: "utils.ts",
              code: `export function greet(name: string) {\n  console.log(\`Hello, \${name}!\`);\n}`,
              language: "typescript",
              highlightLines: [2],
            },
          ]}
        />
      </div>
    </div>
  );
}