# Code Block

Code with built-in syntax highlighting (no Shiki), line numbers and copy button.

Group: Basics

## Import

```tsx
import { CodeBlock } from "@indoku/ui"
```

## Examples

### Basic usage

```tsx
function CodeBlockDemo() {
  const code = `import { Button } from "@indoku/ui"

// Komponen sederhana
function App() {
  const count = 3
  return <Button variant="outline">Klik {count}</Button>
}`
  return (
    <Stack gap="4">
      <CodeBlock.Root code={code} language="tsx" title="app.tsx" showLineNumbers highlightLines={[5]} />
      <CodeBlock.Root code={`{ "name": "@indoku/ui", "private": false, "version": "0.1.0" }`} language="json" copyable={false} />
    </Stack>
  )
}
```

## Props

### Root

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `code` * | `string` |  |  |
| `language` | `string` |  |  |
| `title` | `React.ReactNode` |  |  |
| `showLineNumbers` | `boolean` |  |  |
| `highlightLines` | `number[]` |  | Line numbers (1-based) to highlight. |
| `addedLines` | `number[]` |  |  |
| `removedLines` | `number[]` |  |  |
| `wrap` | `boolean` |  |  |
| `maxLines` | `number` |  | Limit the initial height; the rest can be revealed with a button. |
| `copyable` | `boolean` | `true` | Show the copy button. |

`*` = required. Style props and HTML attributes are accepted too.