Code Block

v1.0.0

Code

A configurable code block component built on top of react-syntax-highlighter with syntax highlighting, copy functionality, and multiple themes.

Dependencies

react-syntax-highlighter

@types/react-syntax-highlighter

lucide-react

framer-motion

Installation

Add this component to your project

CLI Installation

npx shadcn@latest add https://ui.authmate.xyz/registry/code-block.json

Manual Installation

// 1. Install dependencies
npm install react-syntax-highlighter @types/react-syntax-highlighter lucide-react framer-motion

// 2. Copy the component code to components/ui/code-block.tsx

// 3. Add the following to your tailwind.config.js if not already present:
module.exports = {
  content: [
    "./components/**/*.{js,ts,jsx,tsx}",
    // ... other paths
  ],
  // ... rest of config
}

// 4. Usage example:
import { CodeBlock } from "@/components/ui/code-block"

export default function MyComponent() {
  return (
    <CodeBlock
      code="console.log('Hello World!')"
      language="javascript"
      copyable={true}
      showLineNumbers={true}
    />
  )
}

Props

Component properties and their types

code

string

default: ''

The code content to display

language

string

default: 'javascript'

Programming language for syntax highlighting

theme

'vscode-dark' | 'github' | 'monokai' | 'tomorrow'

default: 'vscode-dark'

Syntax highlighting theme

showLineNumbers

boolean

default: false

Show line numbers

copyable

boolean

default: true

Enable copy to clipboard functionality

title

string

default: undefined

Optional title for the code block

wrapLines

boolean

default: false

Enable word wrapping

highlightLines

number[]

default: []

Array of line numbers to highlight

maxHeight

string

default: undefined

Maximum height with scroll

editable

boolean

default: false

Enable inline code editing

Examples

3 different usage examples

Basic Usage

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

export default function Example() {
  const code = `function hello() {
  console.log("Hello World!");
}`;

  return (
    <CodeBlock
      code={code}
      language="javascript"
      copyable={true}
    />
  )
}

Registry

View the component registry file

View Registry

Live Preview

Interactive

3 examples available

function hello() {
  console.log("Hello, AuthMate UI!");
  return "Welcome to our component library";
}