Join our Discord community
Code

Code Block

Advanced syntax highlighting with line numbers and clipboard functionality. Perfect for React documentation requiring code display with Next.js integration and TypeScript support.

Loading component...

Installation

npx shadcn@latest add https://www.shadcn.io/registry/code-block.json
npx shadcn@latest add https://www.shadcn.io/registry/code-block.json
pnpm dlx shadcn@latest add https://www.shadcn.io/registry/code-block.json
bunx shadcn@latest add https://www.shadcn.io/registry/code-block.json

Features

  • Advanced syntax highlighting powered by Shiki with support for 100+ programming languages
  • Interactive line numbers with customizable display and selection capabilities
  • One-click clipboard functionality using native browser APIs with success feedback
  • Filename display support showing file headers with language icons and metadata
  • Flexible highlighting system supporting line ranges, word patterns, and focused sections
  • Diff visualization displaying code changes with addition and deletion indicators
  • Automatic language detection with manual override options for precise syntax parsing
  • Theme customization supporting light/dark modes and custom color schemes
  • TypeScript support with complete interface definitions for reliable integration
  • Server-side rendering compatible with both client and server component architectures

Examples

No header

Loading component...

Highlighted lines

Loading component...

Highlighted words

Loading component...

Diff

Loading component...

Focus

Loading component...

Hidden line numbers

Loading component...

No syntax highlighting

Loading component...

Custom Theme

Loading component...

Use Cases

This free open source React component works well for:

  • Documentation sites - Code examples and tutorials for developer resources built with Next.js
  • Technical blogs - Syntax-highlighted code snippets in articles using TypeScript
  • API documentation - Request/response examples and code samples
  • Educational platforms - Programming tutorials and interactive coding lessons using shadcn/ui design
  • Code portfolios - Showcasing projects and technical implementations
  • Developer tools - Code viewers and syntax validators using Tailwind CSS styling

API Reference

CodeBlock

PropTypeDefaultDescription
childrenReactNodeundefinedCodeBlockHeader, CodeBlockBody, and content
classNamestringundefinedAdditional CSS classes for the container

CodeBlockHeader

PropTypeDefaultDescription
filenamestringundefinedFile name to display in the header
languagestringundefinedProgramming language for icon display
classNamestringundefinedAdditional CSS classes for the header

CodeBlockBody

PropTypeDefaultDescription
childrenReactNodeundefinedCodeBlockContent or other body elements
classNamestringundefinedAdditional CSS classes for the body

CodeBlockContent

PropTypeDefaultDescription
codestringundefinedCode string to highlight and display
languagestring"text"Programming language for syntax highlighting
highlightLinesnumber[][]Array of line numbers to highlight
highlightWordsstring[][]Array of words/patterns to highlight
focusLinesnumber[][]Array of line numbers to focus/emphasize
showLineNumbersbooleantrueWhether to display line numbers
showCopyButtonbooleantrueWhether to show the copy to clipboard button
themestring"github-dark"Shiki theme for syntax highlighting
classNamestringundefinedAdditional CSS classes for the content

Implementation Notes

  • Component uses Shiki for syntax highlighting with support for 100+ programming languages
  • Server-side rendering supported through separate code-block/server import for RSC compatibility
  • Copy functionality uses native Clipboard API with fallback for older browsers
  • Line highlighting supports both individual numbers and ranges (e.g., [1, 3, 5-8])
  • Word highlighting uses regex patterns for flexible text matching and emphasis
  • Language detection automatic based on file extensions or manual override available
  • Theme system supports both built-in Shiki themes and custom color schemes
  • Compatible with shadcn/ui design system and Tailwind CSS utility classes
  • Performance optimized with code splitting between client and server components
  • Diff visualization uses standard Git diff format with + and - line prefixes