Code Block

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

Import

tsx

import { CodeBlock } from "@indoku/ui"

Examples

Basic usage

app.tsx

1import { Button } from "@indoku/ui"23// Komponen sederhana4export function App() {5  const count = 36  return <Button variant="outline">Klik {count}</Button>7}

{ "name": "@indoku/ui", "private": false, "version": "0.1.0" }

tsx

function CodeBlockDemo() {  const code = `import { Button } from "@indoku/ui"// Komponen sederhanafunction 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 as well.

← Color Swatch Input →

Created by @indokudev