Code block

Present code with legible hierarchy and copy access.

npm install https://animui.stracture.net/__local/package.tgz

Live · keyboard ready

button.tsxtsx

<Button variant="secondary">Review changes</Button>

When to use

Documentation snippets and install commands with a copy button.
Long files that should collapse to a few lines with Show all, via maxLines.

When not to use

Use copy-button alone for a one-line value such as an API key.
Use text-stream for code arriving from an AI response in progress.
Use a full highlighter library when you need many languages.

Installation

Install animui once, then import any component or block from its typed package entry.

animui · 250 components and blocks

React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.

npm install https://animui.stracture.net/__local/package.tgz

Load the stylesheet once at your app root, then use the typed component import:

import 'animui/styles.css';
import { CodeBlock } from 'animui/code-block';

Read the Code tab for the implementation files and the API reference below for required props.

Download animui 0.3.0 · Agent guide

Usage

example.tsx

1import { CodeBlock } from "animui/code-block";2 3const snippet = `export function hello() {4  return "world";5}`;6 7export function Example() {8  return <CodeBlock code={snippet} filename="hello.ts" language="ts" maxLines={12} />;9}

API reference

`CodeBlock`

A source viewer with filename header, light syntax highlighting, copy button, and optional collapse.

PropTypeDefaultDescription

codeRequiredstring–Source shown and copied.

filenamestring–File name in the header. Defaults to "Source code".

languagestring"tsx"Header label and highlighter mode.

maxLinesnumber–Collapses longer sources to this many lines with a Show all toggle.

Keyboard interactions

Tab: Focuses the copy button, the scrollable source, and the expand toggle.
EnterorSpace: Copies the code or toggles the expanded state.

Accessibility

The block is a section labelled like "hello.ts source code"; the pre is focusable so keyboard users can scroll it.
The expand toggle uses aria-expanded and aria-controls pointing at the source.
Copy feedback comes from copy-button.

Motion

Expanding or collapsing springs the source height; new code fades up in place.
The toggle label rolls and its chevron rotates.
Reduced motion snaps height and swaps text without movement.

Responsive behavior

Long lines scroll horizontally inside the block, never the page.
Below 420px the padding and font shrink and the copy button becomes icon-only.

Performance

The built-in highlighter is a small regex pass with no language bundles.
ResizeObservers measure the source for the height spring; many blocks on one page each run their own.

Notes for AI

Give your coding assistant the Markdown reference instead of screenshots.

Use for documentation snippets and install commands. The highlighter is lightweight; use a full highlighter for many languages.
Set maxLines for long files so pages stay scannable.

/components/code-block/markdown

The full library index for assistants is at /llms.txt.