CodeBlock

Displays syntax-highlighted code inside AI chat responses, with an optional filename header and copy-to-clipboard button.

greet.ts

1function greet(name: string) {2  return `Hello, ${name}!`3}

import { CodeBlock } from "@aetherstack/ui"

Installation

terminal

npx aether-ui add code-block

Import

import.tsx

import { CodeBlock } from "@aetherstack/ui"

Usage

codeblock.tsx

<CodeBlock
  code={`function greet(name: string) {
  return \`Hello, \${name}!\`
}`}
  filename="greet.ts"
  language="typescript"
  showLineNumbers
/>

Props

Prop	Type	Default	Description
code*	string	—	The code string to display.
language	string	—	Language hint shown in the header (e.g. typescript, python).
filename	string	—	Filename shown in the header.
showLineNumbers	boolean	false	Shows a line number gutter.
className	string	—	Additional CSS classes.

* Required

Accessibility

→Copy button has an aria-label that updates to 'Copied!' after activation.
→Code is wrapped in a <pre><code> block with the language class for screen reader context.