code block

syntax-highlighted code block with line numbers and copy button.

examples

full code block

the default code block with header, line numbers, and copy button.

typescript

1import { useState } from 'react'23export function Counter() {4  const [count, setCount] = useState(0)56  return (7    <button onClick={() => setCount(count + 1)}>8      Count: {count}9    </button>10  )11}

python

1def fibonacci(n):2    """Generate fibonacci sequence up to n."""3    a, b = 0, 14    while a < n:5        yield a6        a, b = b, a + b78# Print first 10 fibonacci numbers9for num in fibonacci(100):10    print(num)

bash

1#!/bin/bash2# Install dependencies3npm install45# Run development server6npm run dev

compact code block

a simpler code block for dense ui contexts like chat messages.

1import { useState } from 'react'23export function Counter() {4  const [count, setCount] = useState(0)56  return (7    <button onClick={() => setCount(count + 1)}>8      Count: {count}9    </button>10  )11}

installation

bash

1npx shadcn@latest add https://ui.inference.sh/r/code-block.json

usage

tsx

1import { CodeBlock, CompactCodeBlock } from '@/components/code-block'23export function MyComponent() {4  const code = `function hello() {5  console.log('Hello, world!')6}`78  return (9    <div>10      <CodeBlock language="typescript">{code}</CodeBlock>11      <CompactCodeBlock language="typescript">{code}</CompactCodeBlock>12    </div>13  )14}

props

prop	type	default
language	string	`"code"`
showLineNumbers	boolean	true
showCopyButton	boolean	true
showHeader	boolean	true
enableHighlighting	boolean	true