# CodeBlock

Selectable source with a real copy action and room for long lines.

- Family: Content, imported from `mizu-ui` or `mizu-ui/content`
- Docs: https://mizu.user64bit.world/components/code-block
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/content/Typography.tsx

## Usage

```tsx
import { CodeBlock } from "mizu-ui";

export function Example() {
  return (
    <CodeBlock
      filename="app.tsx"
      language="tsx"
      code={
        'import { Button } from "mizu-ui";\n\n<Button>Make something</Button>'
      }
    />
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/code-block 0xuser64bit/mizu/button
```

## Props

- `code`: `string`. Complete source text.
- `language / filename`: `string`. Caption metadata; no syntax parser is loaded.
- `label`: `string` (default `filename, or “{language} code”`). Names the scrollable region. Give each block on a page its own, such as “Install command”.

## Accessibility

Focus the preformatted region to scroll. Each block is a named region, so give blocks on one page distinct labels. CopyButton reports clipboard failure. Content is React-escaped, never injected HTML.

## Motion

Static source display.