# Code

> Inline code or a code block with build-time highlighting, line numbers, a copy button and a collapsible long view.

URL: https://apogee.avaui.dev/docs/code
Last updated: 2026-10-15

Inline code or a code block with build-time highlighting, line numbers, a copy button and a collapsible long view.

Last updated October 15, 2026

Uses JavaScript

Copies the block’s text to the clipboard on click, then swaps the icon to a checkmark and shows a “Copied” label for 3 seconds. With `maxHeight`, a Show more button expands and collapses the block.

**Without JS:** The copy button and the Show more toggle (\`no-js:hidden\`) don't render. The code stays visible and selectable, and a collapsed block scrolls instead.

```astro
<Code copy>npm install @ava-ui/apogee</Code>
```

## Add

```sh
npx @ava-ui/apogee add code
```

No Apogee dependencies. Uses `@lucide/astro` internally (`Copy`, `Check`) for the copy button — no icon import needed in your usage.

## Usage

```astro
---
import Code from '@/components/apogee/Code/Code.astro'
---
Run <Code>npm i</Code> to install.

<Code block>const x = 1</Code>
<Code copy>const x = 1</Code>
```

## API

`@composable` — exposed to Content Editors in AVA. Any other native `<code>` / `<pre>` / `<div>` attribute (e.g. `aria-label`) passes through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `block` | `boolean` | `false` | Renders a block `<pre>` panel instead of inline `<code>`. |
| `copy` | `boolean` | `false` | Adds a copy-to-clipboard button. Implies `block`. |
| `lang` | `string` | — | Syntax-highlights at build time (both themes). Implies `block`. Requires `code`; without it the slot renders plain. |
| `code` | `string` | — | Source to highlight when `lang` is set. |
| `lineNumbers` | `boolean` | `false` | Numbers each line (CSS counters; copying skips them). Needs `lang` and `code`. |
| `maxHeight` | `string` | — | Collapses a long block to this height with a “Show more” toggle (JS); without JS the block scrolls. |
| `class` | `string` | — | Extra classes, merged last. |

## Variants

The three render modes — inline, block, and block with copy:

```astro
<Code>npm i</Code>
<Code block>{'{ "name": "apogee" }'}</Code>
<Code copy>npm install @ava-ui/apogee</Code>
```

## States

-   **Default** — copy button shows a copy icon, muted-foreground colour.
-   **Hover / focus** — button background shifts to `--background-neutral-faded`; a visible `focus-visible` ring on keyboard focus.
-   **Copied** — icon swaps to a checkmark, button turns `--foreground-positive`, and a “Copied” label fades in for 3 seconds (`role="status"`).

```astro
<Code copy>git commit -m "fix: copy button"</Code>
```

## Examples

Highlighted (build time, follows the theme):

Line numbers, and a long block collapsed to `10rem`:

```astro
<Code lang="ts" code={src} lineNumbers copy />
<Code lang="ts" code={longSrc} lineNumbers maxHeight="10rem" />
```

Tabbed install commands: Tabs with a copyable block per panel.

```astro
<Tabs variant="pills" tabs={['npm', 'pnpm', 'yarn']}>
<Code slot="panel-0" copy>npm i @ava-ui/apogee</Code>
…
</Tabs>
```

```astro
<Code lang="ts" copy code={tsSnippet} />
<Code lang="css" code={cssSnippet} />
<Code lang="html" code={htmlSnippet} />
```

Inline, in prose:

```astro
Run <Code>npm i</Code> before starting the dev server.
```

Block, no copy button (e.g. read-only output):

```astro
<Code block>✓ 12 tests passed</Code>
```

Block with copy, for install commands and config snippets:

```astro
<Code copy>pnpm add -D @ava-ui/apogee</Code>
```

## Accessibility

-   The copy button is a real `<button>` — focusable and operable with Enter/Space, and has `aria-label="Copy code"`.
-   The “Copied” confirmation is a `role="status"` label so it’s announced to screen readers without stealing focus.
-   **No JS:** the copy button carries `no-js:hidden` and never renders — the code text itself is always selectable, so copying by hand still works.
-   The copied-state transition respects `prefers-reduced-motion`.

## Tokens

| Token | Used for |
| --- | --- |
| `--border-neutral` | Inline `<code>` and block `<pre>` border |
| `--background-neutral-faded` | Inline code background |
| `--background-page-faded` | Block background |
| `--background-neutral-faded-highlighted` | Copy and Show more button hover |
| `--background-page` | Copy button background |
| `--foreground-neutral` | Code text; copy button hover/copied text |
| `--foreground-neutral-faded` | Copy button default icon/text colour |
| `--foreground-positive` | Copy button “copied” colour |
| `--outline-color-focus` | Focus ring |
| `--duration-fast` / `--ease-standard` | “Copied” label fade transition |

## Do / Don’t

-   **Do** use `copy` for anything a reader will paste elsewhere — install commands, config, CLI output.
-   **Do** use inline `<Code>` for short identifiers, flags, and filenames in prose.
-   **Don’t** use `Code` for large syntax-highlighted files — pair Astro’s built-in Shiki / Expressive Code in Markdown for that; this is the bare styled element.
-   **Don’t** pad the content with extra leading/trailing whitespace — it gets copied along with the code.

## Content

-   Keep inline code to short tokens (a command, a flag, a filename); move anything longer into a block.
-   Block content is literal source — no explanatory prose inside the block.

## Related

[

KbdA single keyboard key or shortcut, styled like a physical key.

](https://apogee.avaui.dev/docs/kbd)[

ProseTypography styling for a block of rich, CMS, or markdown HTML you don't control element by element.

](https://apogee.avaui.dev/docs/prose)[

BlockquoteA pull quote with optional attribution. Use to set a quoted passage apart from body copy.

](https://apogee.avaui.dev/docs/blockquote)