AI Elements

Ai Code Block

Compound code surface for tool output and streamed files.

Import

tsx

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

bash

npx cronus-ui add ai-code-block

Examples

Tool output

Compound code surface with a copy control. No extra highlighter dependency.

main.ts

export const n = 1

tsx

<AiCodeBlock
  defaultValue="main.ts"
  data={[{ filename: "main.ts", language: "ts", code: "export const n = 1\n" }]}
>
  <AiCodeBlockHeader>
    <span className="font-mono text-xs">main.ts</span>
    <AiCodeBlockCopyButton />
  </AiCodeBlockHeader>
  <AiCodeBlockBody>
    {(item) => (
      <AiCodeBlockItem key={item.filename} value={item.filename}>
        <AiCodeBlockContent language={item.language}>{item.code}</AiCodeBlockContent>
      </AiCodeBlockItem>
    )}
  </AiCodeBlockBody>
</AiCodeBlock>

API Reference

Generated from the component's exported types.

AiCodeBlockLabels

Prop	Type	Default	Description
`copy`	`string`	—	—
`copied`	`string`	—	—
`selectFile`	`string`	—	—

AiCodeBlockProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`defaultValue`	`string`	—	Uncontrolled initial value.
`value`	`string`	—	Controlled value.
`onValueChange`	`(value: string) => void`	—	Called when the value changes.
`data`*	`AiCodeBlockData[]`	—	—
`labels`	`AiCodeBlockLabels`	—	Override default English strings.

AiCodeBlockHeaderProps

Extends HTMLAttributes<HTMLDivElement>

No own props — see the extended type above for available props.

AiCodeBlockFilesProps

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

Prop	Type	Default	Description
`children`*	`AiCodeBlockChildren`	—	Contents of the component.

AiCodeBlockFilenameProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`value`	`string`	—	Controlled value.

AiCodeBlockSelectProps

Extends ComponentProps<typeof Select>

Prop	Type	Default	Description
`children`*	`AiCodeBlockChildren`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

AiCodeBlockSelectItemProps

Extends ComponentProps<typeof SelectItem>

No own props — see the extended type above for available props.

AiCodeBlockCopyButtonProps

Extends ComponentProps<typeof Button>

Prop	Type	Default	Description
`onCopy`	`() => void`	—	—
`onError`	`(error: Error) => void`	—	—
`timeout`	`number`	`2000`	—
`code`	`string`	—	Explicit payload. Defaults to the active file in `AiCodeBlock` data.

AiCodeBlockBodyProps

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

Prop	Type	Default	Description
`children`*	`AiCodeBlockChildren`	—	Contents of the component.

AiCodeBlockItemProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`value`*	`string`	—	Controlled value.
`lineNumbers`	`boolean`	`false`	—

AiCodeBlockContentProps

Extends HTMLAttributes<HTMLPreElement>

Prop	Type	Default	Description
`language`	`BundledLanguage`	—	—
`children`*	`string`	—	Contents of the component.