Display

Code Block

Server Component

Source snippet with header, line numbers and copy.

Import

tsx

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

bash

npx cronus-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 cronus-ui add button card dialog

tsx

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

Line numbers

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

tsx

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

tsx

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

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

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component CodeBlockDefault layout:inline style:code-block {
  filename:"index.ts"
  language:"ts"
  label "const n = 1;"
  text "const n = 1;"
}

page "/audit/code-block/default" type:custom {
  use CodeBlockDefault
}

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.
`className`	`string`	—	Additional class names merged onto the root.
`id`	`string`	—	DOM id of the root element.