CodeBlock

pro

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

clamp.ts

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

Installation

Add this component with the NateUI CLI.

npx nateui@latest add CodeBlock

pnpm dlx nateui@latest add CodeBlock

yarn dlx nateui@latest add CodeBlock

Examples

Without Filename

Get the code

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

Line Numbers

Get the code

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
}

Multiple Languages

Get the code

terminal

pnpm install
pnpm dev

package.json

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

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'>`	—