Code Block

# Hello World in Python
def main():
    print("Hello, World!")

if __name__ == "__main__":
    main()

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/code-block.json

Usage

Copyimport { CodeBlock } from "@/components/ui/code-block"
 
export default function Example() {
  return (
    <CodeBlock
      code={`print("Hello, World!")`}
      language="python"
      filename="hello.py"
      showLineNumbers={true}
    />
  )
}

Features

• Dual Mode: Package manager commands or syntax-highlighted code
• Syntax Highlighting: Powered by Prism with custom themes
• Package Manager Tabs: Support for npm, yarn, pnpm, and bun
• Copy to Clipboard: One-click copy functionality with visual feedback
• Line Numbers: Optional line numbering for code blocks
• Custom Themes: Light/dark adaptive themes with hover effects
• Terminal Styling: Command-line interface appearance
• Responsive: Horizontal scrolling for long content
• Flexible: Shows only provided package managers or code content

Examples

Package Manager Commands

npm install @radix-ui/react-dropdown-menu

Interactive Theme Demo

1package main
2
3import "fmt"
4
5func main() {
6    fmt.Println("Hello, World!")
7}

API Reference

Props

Types

Copytype PackageManager = "npm" | "yarn" | "pnpm" | "bun"
 
interface AdaptiveTheme {
  light: PrismTheme
  dark: PrismTheme
}

Theme Structure

Custom themes follow the Prism theme structure:

Copyconst customTheme: PrismTheme = {
  plain: {
    color: "#e6e6fa",
    backgroundColor: "#1a1a2e",
  },
  styles: [
    {
      types: ["comment"],
      style: {
        color: "#6a7b9a",
        fontStyle: "italic",
      },
    },
    // ... more styles
  ],
}