H
UI by hampton.io
Back to Components
Content

Code Block

Code display with optional highlighted HTML and a copy button.

PropsUsage ExampleVariations
hello.ts
function greet(name: string) {
  return `Hello, ${name}!`;
}

console.log(greet("World"));

Dependencies

  • clsx
  • tailwind-merge
  • lucide-react

Files

  • components/ui/code-block.tsx

Installation

Using shadcn CLI

npx shadcn add code-block --url https://ui.hampton.io

Manual installation

Copy the component file to your project and install dependencies:

npm install clsx tailwind-merge lucide-react

Related Content Components

Changelog Entry

Version entry with tags, date, and collapsible details.

Code Diff

Side by side code diff viewer with line numbers and highlights.

Link Preview

OpenGraph style preview card with image, title, description, and domain.

Quote Block

Styled blockquote with attribution and optional avatar.

Terminal Window

Retro terminal window with title bar, prompt, and typing effect.