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/cli@latest add CodeBlock

pnpm dlx @nateui/cli@latest add CodeBlock

yarn dlx @nateui/cli@latest add CodeBlock

Examples

Without Filename

Get the code

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

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