# CodeBlock
Code or a command on a muted surface in the theme's monospace font, with a caption and a button that copies it. The code shows exactly as given and scrolls sideways rather than wrapping (unless `wrap`), and the block becomes a tab stop while it overflows, so a keyboard can scroll it. Copying says "Copied" to screen readers.
```tsx
import { CodeBlock } from "@/components/ouro/code-block/code-block";
```
## Example
```tsx
```
## Usage
It does not color the code; to highlight it, set colors on the `data-language` block from a highlighter of your own, or pass highlighted code to your own ``.
## Use instead when
- Use `Kbd` instead for a key or shortcut in a sentence, `` for a short name in running text, and `CopyButton` for one value without a block around it.
## Props
Type: `CodeBlockProps`.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string` | | Layout only: margins, width, a maximum height that scrolls (`max-h-80`). Appearance classes warn in development. |
| `code` (required) | `string` | | The code, as plain text. It shows exactly as given, whitespace and all, and is what the copy button copies. |
| `copy` | `boolean` | `true` | The copy button in the bar above the code. Turn it off for code nobody should paste, such as output. |
| `copyLabel` | `string` | `"Copy code"` | The copy button's name for screen readers. |
| `language` | `string` | | The language, shown in the block's caption when there is no `title` and set as `data-language` on the block for a highlighter of your own: `language="bash"`. |
| `ref` | `Ref` | | Reaches the rendered element. |
| `title` | `ReactNode` | | A caption above the code, such as its file name: `title="vite.config.ts"`. |
| `wrap` | `boolean` | | Wraps long lines instead of scrolling them sideways. Scrolling keeps code as written, so leave it off for code and turn it on for prose-like text such as a long command. |
## Native attributes
Also accepts the attributes in React's `HTMLAttributes` (`id`, `aria-*`, event handlers), passed to the rendered element, except those named on this page.
## Don't use
These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix.
- `children`: Not a prop. The code is `code`, a string: ``.
- `filename`: Not a prop. The caption is `title`: ``.
- `lang`: Not a prop. Ouro UI uses `language`: ``.
- `showCopyButton`: Not a prop. The copy button is on by default; `copy={false}` turns it off.
## `className` is for layout only
Pass margins, width and grid placement (`mt-4`, `w-full`, `col-span-2`).
Appearance comes from props, not classes. In development, a class that sets appearance logs one warning per component instance, naming the prop to use instead. A class sets appearance when, after its variants (`hover:`, `sm:`) and any `!` are removed, it starts with `bg-`, `text-`, `border-`, `rounded-`, `shadow-`, `font-`, `ring-`, `from-`, `via-`, `to-`, `fill-` or `stroke-`, or is `border`, `rounded`, `shadow` or `ring`, or has a `dark:` variant. Text wrapping, overflow and table layout classes (`text-wrap`, `text-ellipsis`, `border-collapse`) are layout and do not warn.
Alignment classes (`text-center`) warn too: set alignment on a parent element.