AI/Code Block

CodeBlock

Syntax-highlighted code display with language detection, line numbers, filename label, and copy-to-clipboard. Designed for rendering LLM-generated code in AI chat interfaces.

import { CodeBlock } from "@animui/ui"

Preview

page.tsx

TSX

1	import { Button } from "@animui/ui";
2
3	export default function Page() {
4	return <Button variant="default">Click me</Button>;
5	}

Props

Prop	Type	Default	Description
`code`	`string`	—	The code string to display.
`language`	`string`	`"tsx"`	Language identifier for syntax highlighting (tsx, ts, js, python, bash, etc.).
`showLineNumbers`	`boolean`	`true`	Shows line numbers in a left gutter.
`filename`	`string`	—	Filename displayed in the top bar of the code block.
`copyable`	`boolean`	`true`	Shows a copy-to-clipboard button.
`theme`	`"dark" \| "light"`	`"dark"`	Color scheme of the code block.
`highlightLines`	`number[]`	`[]`	Array of line numbers to highlight.
`className`	`string`	—	Additional classes on the outer wrapper.

In AI chat contexts

When rendering markdown from an LLM response, pass CodeBlock to your markdown renderer's code component override. It automatically detects the language from the fenced code block syntax.

import { CodeBlock } from "@animui/ui";
import Markdown from "react-markdown";

<Markdown
  components={{
    code({ node, inline, className, children, ...props }) {
      const match = /language-(\w+)/.exec(className || "");
      return !inline && match ? (
        <CodeBlock
          language={match[1]}
          code={String(children).replace(/\n$/, "")}
          showLineNumbers
        />
      ) : (
        <code className={className} {...props}>{children}</code>
      );
    },
  }}
>
  {markdownContent}
</Markdown>