Code Block

Component 12

About

Here is Code Block component

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

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

export default function DemoOne() {
  return (
    <CodeBlock
      code={`function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("World");`}
      language="jsx"
    >
      <CodeBlockCopyButton
        onCopy={() => console.log("Copied code to clipboard")}
        onError={() => console.error("Failed to copy code to clipboard")}
      />
    </CodeBlock>
  );
}