Display

Code & Kbd

The system's second voice: mono for machine-authored fact — ids, paths, timestamps, shortcuts, spec values.

Code Kbd Text

import { Code, Kbd, Text } from '@anomalia/ui';

Notes

Mono is a component, not a convention. A bare font-family in a stylesheet is how mono ends up on prices and body copy.
Never use it to align numbers in a table — Text with numeric gives tabular figures in the sans, which aligns just as well without turning a metrics panel into a terminal.
The x-height is normalised against the sans with font-size-adjust, so the pairing holds on every platform, loaded font or OS fallback.
Ligatures are disabled: => collapsing into an arrow is charming in an editor and misleading in a log line or an id.

Examples

Mono voice

Mono is the font of machine-authored fact: ids, paths, timestamps, shortcuts. It sits on the same x-height as Inter because `font-size-adjust` normalises whatever mono actually resolves.

The plan is written to brands/lindaria/plan.json and the run is tagged run_8f2c41d. Press to jump to it.

ok Produce week 34 12.4s

run Render reel · studio tour 38.1s

2026-08-17T09:14:22Z · queue=6 · credits=1240

Block

Block form for anything multi-line. Ligatures are off on purpose: `=>` collapsing into an arrow is charming in an editor and confusing in a log.

12:04:18  plan.produce      week=34 posts=12      ok    1.9s
12:04:20  media.render      reel/studio-tour     ok   38.1s
12:04:58  channel.schedule  ig,tt,li             ok    0.4s
12:04:59  credits.debit     -320                 ok

API

Code

Prop	Type	Default	Description
`variant`	`'inline' \| 'block'`	`'inline'`	Inline span, or a scrollable `<pre>`.
`tone`	`'default' \| 'muted'`	`'default'`	Secondary metadata reads muted.
`bare`	`boolean`	`false`	Drop the tinted background.

Kbd

Prop	Type	Default	Description
`keys`	`string`	—	A key or chord — `⌘K`, `Ctrl+Shift+P`. Split on `+`.
`size`	`'sm' \| 'md'`	`'md'`	Cap size.

Text

Prop	Type	Default	Description
`family`	`'sans' \| 'mono'`	`'sans'`	Switches a whole line to the mono voice.

Every component also forwards the native attributes of its root element, plus class, so anything not listed here still works.