Data Display

Code Block

Source snippet with header, line numbers and copy.

Import

tsx

import { CodeBlock } from "@cooud-ui/ui";

bash

npx cooud-ui add code-block

Examples

Default

Renders a source snippet with a built-in copy button. Add a `language` badge and/or a `filename` to show a header.

terminalbash

bunx cooud-ui add button card dialog

tsx

<CodeBlock
  language="bash"
  filename="terminal"
  code="bunx cooud-ui add button card dialog"
/>

Line numbers

Set `showLineNumbers` to render a non-selectable gutter beside the code.

tsx

1import { Button } from "@cooud-ui/ui";2 3export function Save() {4  return <Button>Save</Button>;5}

tsx

<CodeBlock
  language="tsx"
  showLineNumbers
  code={`import { Button } from "@cooud-ui/ui";

export function Save() {
  return <Button>Save</Button>;
}`}
/>

API Reference

Generated from the component's exported types.

CodeBlockProps

Extends Omit<HTMLAttributes<HTMLDivElement>, "children">

Prop	Type	Default	Description
`code`*	`string`	—	Raw source to render and copy.
`language`	`string`	—	Language label rendered as a Badge in the header.
`filename`	`string`	—	File name rendered in the header.
`showLineNumbers`	`boolean`	`false`	Render a gutter with 1-based line numbers. Defaults to false.