CodeBlockexperimental

Read-only code display card with a one-click copy button, an accessible copy status, and horizontal scroll contained inside the block. Renders raw text — highlighting is layered in by a consumer or the StreamingMarkdown renderer.

type Source = { id: string; title: string; url?: string };

function cite(sources: Source[]): string {
  return sources.map((s, i) => `[${i + 1}] ${s.title}`).join('\n');
}

Wrap lines

Copy button

Language

Loading syntax highlighting...

01 Examples

Multi-line code

Pass the code as a string. It renders as raw text — no built-in highlighting — and long lines scroll horizontally inside the block, never the page. The header shows the language label and a copy button.

import { CodeBlock } from '@urbicon-ui/blocks';

export function greet(name: string): string {
  return `Hello, ${name} — this line is long enough to scroll inside the block.`;
}

Loading syntax highlighting...

Track copies with onCopy

onCopy fires only after the clipboard write succeeds — the reliable hook for analytics like 'install command copied', with no clipboard polling.

bash

curl -fsSL https://ui.urbicon.de/install.sh | sh

Copied 0 times.

Loading syntax highlighting...

Extra header actions

The actions snippet renders custom controls in the header, to the left of the copy button — e.g. 'Run', 'Open in editor', or a language switch.

sql

SELECT id, title FROM sources WHERE cited = true;

Loading syntax highlighting...

02 Accessibility

Copy button label

The copy button carries an aria-label that swaps from copyLabel ("Copy code") to copiedLabel ("Copied") for two seconds after a successful copy, so its accessible name always matches what the user sees. A denied or failed clipboard write leaves the label untouched — the UI never falsely confirms a copy that did not happen.

Status announcement

A visually hidden role="status" region announces "Copied" to screen readers. A label change on the button the user just pressed is not a reliable announcement; a dedicated live region is, so the region ships in the DOM up front and only its text content changes.

Scrollable region

The code body is a focusable role="region" (tabindex="0") labelled by the language, so keyboard users can reach and scroll horizontally overflowing code (WCAG 2.1.1). Focus rings use focus-visible: for keyboard-only visibility.

03 API Reference

14 props

14 props 1 required

No matching properties

No matching properties

04 Installation

Import

Loading syntax highlighting...

llm.txt