Code Block

tsx

import { Button } from "@/components/ui/button"

export function MyComponent() {
  return <Button>Click me</Button>
}

import { CodeBlock } from "@/components/ui/code-block"

const code = `import { Button } from "@/components/ui/button"

Installation


pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nessra-ui.vercel.app/r/code-block.json

Usage

import { CodeBlock } from "@/components/ui/code-block"

<CodeBlock code={`console.log("Hello, World!")`} language="javascript" />

Examples

With Line Numbers

Enable line numbers with the showLineNumbers prop.

typescript

function fibonacci(n: number): number {
  if (n <= 1) return n
  return fibonacci(n - 1) + fibonacci(n - 2)
}

// Calculate first 10 fibonacci numbers
for (let i = 0; i < 10; i++) {
  console.log(fibonacci(i))
}

import { CodeBlock } from "@/components/ui/code-block"

const code = `function fibonacci(n: number): number {

Simple Command

Display a simple command or snippet.

bash

npm install nessra-ui

import { CodeBlock } from "@/components/ui/code-block"

const code = `npm install nessra-ui`

API Reference

CodeBlock

Prop	Type	Default	Description
`code`	`string`	-	The code to display
`language`	`string`	`plaintext`	Language for highlighting (e.g., "tsx")
`showLineNumbers`	`boolean`	`false`	Show line numbers
`showCopyButton`	`boolean`	`true`	Show copy button
`maxHeight`	`string \| number`	`400px`	Maximum height with scroll

CodeBlock uses Shiki for syntax highlighting and automatically adapts to light/dark mode.

Installation

Usage

Examples

With Line Numbers

Simple Command

API Reference

CodeBlock

On this page