Code block

Present code with legible hierarchy and copy access.

import { CodeBlock } from "@/forma/arc/code-block/code-block";

Base

In FORMA

Liegt in kit/arc/code-block und ist über @/forma/arc/code-block/code-block erreichbar.
Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.

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.

Usage

import { CodeBlock } from "@/forma/arc/code-block/code-block";

const snippet = `export function hello() {
  return "world";
}`;

export function Example() {
  return <CodeBlock code={snippet} filename="hello.ts" language="ts" maxLines={12} />;
}

API reference

CodeBlock

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

Prop	Type	Default	Description
`code` (required)	`string`	–	Source shown and copied.
`filename`	`string`	–	File name in the header. Defaults to "Source code".
`language`	`string`	`"tsx"`	Header label and highlighter mode.
`maxLines`	`number`	–	Collapses longer sources to this many lines with a Show all toggle.

Keyboard interactions

Keys	Action
Tab	Focuses the copy button, the scrollable source, and the expand toggle.
Enter / Space	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

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.

Also in tables

Sortable data table: Compare structured records with sortable columns.
Reorderable list: Organize items with direct drag and drop.
Filter toolbar: Keep collection filters close and easy to reset.
JSON viewer: A collapsible JSON tree with search, paging for long arrays, and copy value or path.

Guidance for AI tools

Code block: Present code with legible hierarchy and copy access. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt

ZurückAnimated counter WeiterReorderable list

Komponente und Text: Arc UI (MIT, uiarc.dev), angepasst für FORMA.