# Code block

Code block is a neobrutalist React component from Cruise UI. Plain-text code in the system monospace font on a dark (.on-deep) panel, with an optional file name and language label and a Copy button. Long lines scroll inside the block.

Install (with the @cruiseui registry in components.json, see Installation):

```bash
npx shadcn@latest add @cruiseui/cruise-code-block
```

Import: `import { CruiseCodeBlock } from "@/components/cruise/code-block";`

## When to use

Install commands, snippets and keys in docs and settings pages.

## When not to

Short inline code in a sentence (use <code>).

## Example (React)

```tsx
import { CruiseCodeBlock } from "@/components/cruise/code-block";

export default function CodeBlockExample() {
  return (
    <div className="flex flex-col gap-6">
      <CruiseCodeBlock title="Terminal" language="bash" code="npx shadcn@latest add @cruiseui/cruise-dashboard-layout @cruiseui/cruise-stat-card" />
      <CruiseCodeBlock
        title="app/(dashboard)/layout.tsx"
        language="tsx"
        code={`import { CruiseDashboardLayout } from "@/components/cruise/blocks/dashboard-layout";

export default function Layout({ children }: { children: React.ReactNode }) {
  return <CruiseDashboardLayout nav={nav}>{children}</CruiseDashboardLayout>;
}`}
      />
    </div>
  );
}
```

## HTML

Needs theme.css (https://cruiseui.dev/theme.css).

```html
<figure class="code-block">
  <div class="code-block-inner on-deep">
    <div class="code-block-head"><figcaption class="code-block-title">app/layout.tsx</figcaption><span class="code-block-lang">tsx</span></div>
    <pre tabindex="0" aria-label="Code: app/layout.tsx"><code>npx shadcn@latest add @cruiseui/button</code></pre>
  </div>
</figure>
```

## Props: CruiseCodeBlock

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `code` | `string` | — | — |
| `title?` | `string` | — | e.g. a file name: "app/layout.tsx". |
| `language?` | `string` | — | Shown as a small label, e.g. "tsx" or "bash". |
| `copy?` | `boolean` | `true` | Show the Copy button. |
| `copyLabel?` | `string` | `"Copy code"` | The Copy button's accessible name. |
| `className?` | `string` | — | — |

## Accessibility

- The code area can take focus, so long lines scroll with the keyboard.
- The Copy button announces "Copied".
- No colour-only meaning: plain text, no highlighting.