AI Elements

Code block

Code highlighted with Shiki in light and dark, with a header for a filename and a copy button. The usage blocks on these pages are this.

packages/design-system/components/ai-elements/code-block.tsx

Examples

import { Button } from "@repo/design-system/components/ui/button";

export function Cta() {
  return <Button>Start a project</Button>;
}

Filename and copy

import { Button } from "@repo/design-system/components/ui/button";

export function Cta() {
  return <Button>Start a project</Button>;
}

Line numbers, no header

Anatomy

01Container
02Header: title and actions
03Highlighted lines
04Copy button

Usage

import {
  CodeBlock, CodeBlockActions, CodeBlockCopyButton, CodeBlockFilename, CodeBlockHeader, CodeBlockTitle,
} from "@repo/design-system/components/ai-elements/code-block";

<CodeBlock code={code} language="tsx">
  <CodeBlockHeader>
    <CodeBlockTitle>
      <CodeBlockFilename>button.tsx</CodeBlockFilename>
    </CodeBlockTitle>
    <CodeBlockActions>
      <CodeBlockCopyButton />
    </CodeBlockActions>
  </CodeBlockHeader>
</CodeBlock>

Props

Prop	Type	Default	Description
code*	string	none	The source.
language*	BundledLanguage	none	Any Shiki language: tsx, ts, css, json, bash...
showLineNumbers	boolean	false	A gutter of line numbers.
CodeBlockCopyButton timeout / onCopy / onError	number / () => void / (error) => void	2000	How long the check shows, and callbacks.
className	string	none	Merged last with cn(). Use it for layout (width, margin), not to restyle the component.

Guidance

Name the file in the header when there is one.

Don't

Use it for a single inline token. Use <code>.

Where it's used

Every component page here