greet.ts

1export function greet(name: string) {
2  return `Hello, ${name}!`;
3}

bun add prism-react-renderer prismjs

Code Block

A scrollable code block with language and package-manager icons from SVGL, an optional filename, line numbers, and a copy button. CodeBlock is the parent component: it composes the header, copy action, package-manager tabs, and a memoized Prism renderer. Syntax highlighting safely escapes markup and uses global theme colors.

Installation

bunx shadcn@latest add https://ui.razeev.com/r/code-block.json

Usage

tsx

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

<CodeBlock
  code={'const greeting = "Hello, world!";\nconsole.log(greeting);'}
  language="javascript"
  filename="hello.js"
  showLineNumbers
/>

Examples

Use showLineNumbers for numbered snippets and filename for a file label. Omit both for a plain snippet. The preview above shows a filename and numbered lines.

CodeBlock owns the complete layout. Pass source through code and the grammar through language; the component renders its header and Prism-highlighted code together.

Package managers

tsx

<CodeBlock commands={{
  bun: "bun add prism-react-renderer prismjs",
  npm: "npm install prism-react-renderer prismjs",
  pnpm: "pnpm add prism-react-renderer prismjs",
  yarn: "yarn add prism-react-renderer prismjs",
}} />

The Bun, npm, pnpm, and Yarn buttons switch the displayed command. Copy copies the selected command without line numbers. Optional packageManager and onPackageManagerChange props allow you to control the selection.

Props

Prop	Type	Default	Description
`code`	`string`	`const greeting = "Hello, world!";\nconsole.log(greeting);`	Code to display and copy.
`language`	`string`	`"javascript"`	Syntax highlighting language; unknown languages render as plain text.
`filename`	`string`	`""`	Filename shown in the header.
`showLineNumbers`	`boolean`	`false`	Displays line numbers.
`commands`	`Record<"bun" \| "npm" \| "pnpm" \| "yarn", string>`	`—`	Enables package manager controls and Bash highlighting. Overrides code and language.
`packageManager`	`"bun" \| "npm" \| "pnpm" \| "yarn"`	`"bun" (uncontrolled)`	Controls the selected package manager.
`onPackageManagerChange`	`(manager: "bun" \| "npm" \| "pnpm" \| "yarn") => void`	`—`	Called when the selected package manager changes.
`className`	`string`	`""`	Additional CSS classes on the component root.

Setup notes

Use Tailwind CSS v4 and global border, card, card-foreground, muted, muted-foreground, and ring theme tokens. The registry uses prism-react-renderer and prismjs for syntax highlighting and lucide-react for icons. No rounded classes are included. Copy requires a secure browser context, such as HTTPS or localhost; when copying fails, select the code and copy it manually. JavaScript/JSX, TypeScript/TSX, Bash, JSON, CSS, HTML/XML, and Python are highlighted using Prism. Unknown languages display as plain text.