# CodeBlock

> Code container with optional window chrome, filename and language labels, and a copy button that says so when the copy fails. Pass raw code in code, or children for highlighted JSX.

Section: Content. Docs: https://entrepta.vercel.app/docs/components/code-block

## Install

```bash
npx @entrepta/cli@latest add code-block
```

Files: `content/code-block.tsx`, `hooks/use-copy.ts`.
npm packages: `@phosphor-icons/react`.
Comes with: `use-copy`.

## Usage

```tsx
import { CodeBlock } from "@/components/entrepta/code-block"

// Plain copy-paste snippet
<CodeBlock
  code={`npx @entrepta/cli@latest init --theme=ivy`}
  filename="install.sh"
  language="bash"
  variant="terminal"
/>

// Custom highlighted body; copy still grabs the raw code
<CodeBlock code={raw} filename="tokens.css" language="css">
  <span className="text-[var(--fg-brand)]">--fg-brand</span>: #7C6BFF;
</CodeBlock>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `code` | `string` | - | Raw code string copied to the clipboard. Required. |
| `filename` | `string` | - | Label shown on the left of the chrome |
| `language` | `string` | - | Language tag shown on the right (e.g. bash, tsx, css) |
| `meta` | `string` | - | Secondary label between filename and language |
| `variant` | `"default" \| "terminal"` | "default" | `terminal` adds three macOS-style window dots |
| `showCopy` | `boolean` | true | Toggle the copy button |
| `copyTimeout` | `number` | 1500 | How long the 'copied' state stays visible (ms) |