Code Block

A beautiful code snippet component with syntax highlighting and copy functionality.

Preview

example.ts
1
2
3
function helloWorld() { console.log("Hello, World!"); }

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/code-block.json

Usage

tsx
15 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { CodeBlock } from "@/components/ui/code-block"

export default function Documentation() {
   const code = `const a = 1;
const b = 2;
console.log(a + b);`;

  return (
    <CodeBlock 
       code={code} 
       language="javascript"
       browserLayout={false}
    />
  )
}

Examples

Standard Layout

example.ts
1
2
3
function helloWorld() { console.log("Hello, World!"); }

Browser Window Layout

app.tsx
1
2
3
function helloWorld() { console.log("Hello, World!"); }

Props

PropTypeDescription
code*stringThe source code to display.
languagestringProgramming language for syntax highlighting (e.g., 'typescript', 'javascript', 'css') (default: 'typescript').
filenamestringOptional filename or title to display in the header.
showLineNumbersbooleanWhether to show line numbers (default: true).
browserLayoutbooleanIf true, renders a browser-like window header (traffic lights) (default: false).
classNamestringAdditional CSS classes.