Code Block

Component 22

About

A component for displaying code snippets with syntax highlighting and customizable styling.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Code Block to your project and fits it to your theme.

Code

How Code Block is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import { CodeBlock, CodeBlockCode } from "@/components/ui/code-block"

export function CodeBlockBasic() {
  const code = `function greet(name) {
  return \`Hello, \${name}!\`;
}

// Call the function
greet("World");`

  return (
    <div className="w-full max-w-[400px]">
      <CodeBlock>
        <CodeBlockCode code={code} language="javascript" />
      </CodeBlock>
    </div>
  )
}