Code Block

AI chats 8

About

A muted code surface with line numbers, focused rows, filename metadata, and copy feedback.

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 from '@/components/ui/code-block'

export default function Demo() {
  return (
    <CodeBlock
      className="w-full max-w-lg"
      code={`export function AgentStatus({ active }: Props) {
  return (
    <span data-active={active}>
      {active ? "Working" : "Ready"}
    </span>
  )
}`}
      filename="agent-status.tsx"
      highlightLines={[3, 4]}
      language="tsx"
    />
  )
}