---
title: Code block
description: CodeBlock in Click UI is a component that displays code with syntax highlighting and optional line numbers, copy functionality, and line wrapping.
category: Display
related: [Text, Panel, Container]
commonPatterns: [code-example, syntax-highlighting, code-snippet]
---

Source: https://clickhouse.design/click-ui/codeblock

# Code block

CodeBlock is a component that displays code with syntax highlighting and optional line numbers, copy functionality, and line wrapping. It's perfect for documentation, tutorials, and code examples.

## Example

## Props

| Prop            | Type                                       | Default value | Description                                                                                       |
| --------------- | ------------------------------------------ | ------------- | ------------------------------------------------------------------------------------------------- |
| language        | `string`                                   | `"text"`      | Programming language for syntax highlighting (e.g., "javascript", "typescript", "sql", "bash")    |
| children        | `string`                                   | `undefined`   | Code content to display in the code block                                                         |
| theme           | `"light" \| "dark"`                        | `"light"`     | Color theme for syntax highlighting                                                               |
| showLineNumbers | `boolean`                                  | `false`       | Whether to display line numbers on the left side of the code                                      |
| showWrapButton  | `boolean`                                  | `false`       | Whether to show a button to toggle line wrapping                                                  |
| wrapLines       | `boolean`                                  | `false`       | Whether long lines should wrap instead of creating horizontal scroll                              |
| onCopy          | `(value: string) => void \| Promise<void>` | `undefined`   | Callback function called when code is successfully copied to clipboard. Receives the copied text. |
| onCopyError     | `(error: string) => void \| Promise<void>` | `undefined`   | Callback function called when copy operation fails. Receives the error message.                   |

```tsx
import { CodeBlock } from '@clickhouse/click-ui'

<CodeBlock
language="sql"
children={'SELECT * FROM table'}
/>
```

## Quick start

```tsx
import { CodeBlock } from '@clickhouse/click-ui'

function MyCodeBlock() {
return (
  <CodeBlock
    language="sql"
    children={`SELECT *
FROM users
WHERE active = true`}
  />
)
}
```

## Related components

- **Text**: For displaying code-related text content.
- **Panel**: Often used to contain code blocks.
- **Container**: For organizing multiple code blocks.

## Common use cases

### Code example

```tsx
import { CodeBlock } from '@clickhouse/click-ui'

function CodeExample() {
return (
  <CodeBlock
    language="typescript"
    children={`function greet(name: string) {
return `Hello, ${name}!`
}`}
  />
)
}
```

### Syntax highlighting

```tsx
import { CodeBlock, Container } from '@clickhouse/click-ui'

function SyntaxHighlighting() {
return (
  <Container orientation='vertical' gap='md'>
    <CodeBlock language="sql" children={`SELECT * FROM users`} />
    <CodeBlock language="bash" children={`echo "Hello"`} />
    <CodeBlock language="json" children={`{"key": "value"}`} />
  </Container>
)
}
```

### With line numbers

```tsx
import { CodeBlock } from '@clickhouse/click-ui'

function CodeBlockWithLineNumbers() {
return (
  <CodeBlock
    language="sql"
    showLineNumbers
    children={`SELECT * FROM users`}
  />
)
}
```