CodeBlock

free

CodeBlock highlights a single code snippet with a light/dark-aware theme, filename header, and copy button.

shiki

Preview

Dark

clamp.ts

export function clamp(value: number, min: number, max: number): number {
  return Math.min(Math.max(value, min), max)
}

import CodeBlock from '@/components/composites/CodeBlock';

const code = `export function clamp(value: number, min: number, max: number): number {
  return Math.min(Math.max(value, min), max)
}`;

export default function UsageDemo() {
  return <CodeBlock code={code} language="ts" filename="clamp.ts" />;
}

Installation

Add this component with the NateUI CLI.

npx nateui@latest add CodeBlock

Examples

Without Filename

When no filename is given, there is no header row — the copy button appears in the corner on hover or focus instead.

Preview

Dark

SELECT id, name
FROM customers
WHERE created_at > now() - interval '7 days'
ORDER BY created_at DESC;

import CodeBlock from '@/components/composites/CodeBlock';

const code = `SELECT id, name
FROM customers
WHERE created_at > now() - interval '7 days'
ORDER BY created_at DESC;`;

export default function WithoutFilenameDemo() {
  return <CodeBlock code={code} language="sql" />;
}

Line Numbers

showLineNumbers prints a right-aligned line count beside each row — useful for longer snippets someone might reference by position.

Preview

Dark

useToggle.ts

import { useState } from 'react'

export function useToggle(initial = false) {
  const [value, setValue] = useState(initial)
  const toggle = () => setValue((v) => !v)
  return [value, toggle] as const
}

import CodeBlock from '@/components/composites/CodeBlock';

const code = `import { useState } from 'react'

export function useToggle(initial = false) {
  const [value, setValue] = useState(initial)
  const toggle = () => setValue((v) => !v)
  return [value, toggle] as const
}`;

export default function LineNumbersDemo() {
  return <CodeBlock code={code} language="tsx" filename="useToggle.ts" showLineNumbers />;
}

Multiple Languages

The highlighter loads a small set of common languages up front and fetches others on request, so the same component works across a template's whole language mix.

Preview

Dark

terminal

pnpm install
pnpm dev

package.json

{
  "name": "clamp",
  "version": "1.0.0"
}

import CodeBlock from '@/components/composites/CodeBlock';

const bash = `pnpm install
pnpm dev`;

const json = `{
  "name": "clamp",
  "version": "1.0.0"
}`;

export default function MultipleLanguagesDemo() {
  return (
    <div className="flex flex-col gap-4">
      <CodeBlock code={bash} language="bash" filename="terminal" />
      <CodeBlock code={json} language="json" filename="package.json" />
    </div>
  );
}

API

CodeBlock

Prop	Description	Type	Default
`code`	The source code to highlight.	`string`	—
`language`	Shiki language id used for highlighting.	`string`	—
`filename`	Optional filename shown in a header row above the code.	`string`	—
`showLineNumbers`	Print a line number beside each row.	`boolean`	`false`
`...divProps`	Standard `<div>` attributes forwarded to the root.	`ComponentProps<'div'>`	—