Mono

A text element in JetBrains Mono with four size steps and three text colors. Use it for body text, readouts and log lines inside HUD panels.

import { Mono } from 'jarvis-react-ui';

Sizes

xs is 9px, sm 10px, md (the default) 11px and lg 13px.

import { Mono } from 'jarvis-react-ui';

export default function Sizes() {
    return (
        <div className="flex flex-col gap-2">
            <Mono size="xs">xs · SYS.BOOT 0x00FF</Mono>
            <Mono size="sm">sm · SYS.BOOT 0x00FF</Mono>
            <Mono size="md">md · SYS.BOOT 0x00FF</Mono>
            <Mono size="lg">lg · SYS.BOOT 0x00FF</Mono>
        </div>
    );
}

Colors

The default uses the primary text color. secondary steps it down, muted steps it down further for timestamps and other low-priority text. When both are set, muted wins.

import { Mono } from 'jarvis-react-ui';

export default function Colors() {
    return (
        <div className="flex flex-col gap-2">
            <Mono>Reactor output stable at 3.2 GJ/s</Mono>
            <Mono secondary>Next diagnostic in 14 min</Mono>
            <Mono muted>Log rotated · 2,048 entries archived</Mono>
        </div>
    );
}

Element

Mono renders a <span> by default. Use as to render a different element, such as p, code or time, so the text keeps its meaning in the document.

import { Mono } from 'jarvis-react-ui';

export default function AsElement() {
    return (
        <div className="flex flex-col gap-2">
            <Mono as="time" dateTime="2026-10-03T09:04:17Z" size="lg">
                09:04:17Z
            </Mono>
            <Mono as="code" secondary>
                uplink --channel 7 --encrypt
            </Mono>
            <Mono as="p" muted size="sm">
                Last handshake 312 ms ago.
            </Mono>
        </div>
    );
}

Native attributes (id, title, aria-*, data-*, event handlers) are forwarded to the rendered element, including dateTime for as="time".

Accessibility

  • Renders the element given in as with no extra role, so semantics come from that element.
  • Pick a fitting element (p for paragraphs, code for commands) instead of styling a <span>.
  • muted text has lower contrast; do not use it for information the user must read.

API

Prop Type Default Description
children (required) ReactNode Text to render in the monospace font.
as ElementType span Element or component to render instead of a <span>, e.g. 'p', 'code' or 'time'.
className string Additional class names for the rendered element.
dateTime string Machine-readable date or time, forwarded to the element; use it with as="time".
muted boolean false Uses the muted text color; takes precedence over secondary.
secondary boolean false Uses the secondary text color instead of the primary one.
size 'xs' | 'sm' | 'md' | 'lg' 'md' Font size step: xs 9px, sm 10px, md 11px, lg 13px.

Also accepts inherited props from HTMLAttributes (54), AriaAttributes (53), DOMAttributes (169).