# Code Block

> Shiki-highlighted code surface with line numbers and copy.

Registry name: `code-block`. HTML docs: https://ui.anuragroy.dev/component/code-block.

## Install

```bash
npx shadcn@latest add https://ui.anuragroy.dev/r/code-block.json
```

If the website is down: `npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/code-block.json`.

Registry JSON: https://ui.anuragroy.dev/r/code-block.json (GitHub: https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/code-block.json).

## Import

Import paths follow the consumer `components.json` aliases. After a default install:

```tsx
import {
  CodeBlock,
  CodeBlockContent,
  CodeBlockCopy,
  CodeBlockHeader,
  CodeBlockTitle
} from "@/components/ui/code-block"
```

## Usage

```tsx
import {
  CodeBlock,
  CodeBlockContent,
  CodeBlockCopy,
  CodeBlockHeader,
  CodeBlockTitle,
} from "@/components/ui/code-block"

const code = "export const answer = 42"

export function Example() {
  return (
    <CodeBlock>
      <CodeBlockHeader>
        <CodeBlockTitle>answer.ts</CodeBlockTitle>
        <CodeBlockCopy value={code} />
      </CodeBlockHeader>
      <CodeBlockContent lang="ts" lineNumbers>
        {code}
      </CodeBlockContent>
    </CodeBlock>
  )
}
```

## API

### CodeBlockContent

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `lang` | string | "tsx" |  |
| `lineNumbers` | boolean | false |  |
| `children` | string | — | Pass the source as a string for highlighting. |

### CodeBlockCopy

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | string | — |  |

## Notes

- Highlighting uses `shiki` via the registry `highlight` helper.

## See also

- [HTML page](https://ui.anuragroy.dev/component/code-block): Preview and the same docs in the site chrome.
- [Registry item](https://ui.anuragroy.dev/r/code-block.json): Source files and dependencies.
- [Catalog](https://ui.anuragroy.dev/component): All components.
- [llms.txt](https://ui.anuragroy.dev/llms.txt): Agent index for this library.