Metric

A numeric reading in the bright accent color with an optional unit. Its digits use tabular figures, so values that update live do not make the layout jump.

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

Value and unit

value accepts a number or any node; format it yourself (thousands separators, durations). unit is shown after it in a small muted font. Pair it with a Label that names the reading.

import { Label, Metric } from 'jarvis-react-ui';

const READINGS = [
    { label: 'CPU', value: '42', unit: '%' },
    { label: 'Latency', value: '18', unit: 'ms' },
    { label: 'Altitude', value: '1,204', unit: 'm' },
    { label: 'Uptime', value: '73:12:05' },
];

export default function Units() {
    return (
        <div className="flex flex-wrap gap-8">
            {READINGS.map((r) => (
                <div key={r.label} className="flex flex-col gap-1">
                    <Label>{r.label}</Label>
                    <Metric value={r.value} unit={r.unit} />
                </div>
            ))}
        </div>
    );
}

Warning

warn switches the value to the warning color. Derive it from a threshold so the reading flags itself when it leaves the safe range.

import { Label, Metric } from 'jarvis-react-ui';

const READINGS = [
    { label: 'Core temp', value: 64, unit: '°C', limit: 80 },
    { label: 'Hull stress', value: 91, unit: '%', limit: 75 },
];

export default function Warn() {
    return (
        <div className="flex gap-8">
            {READINGS.map((r) => (
                <div key={r.label} className="flex flex-col gap-1">
                    <Label>{r.label}</Label>
                    <Metric value={r.value} unit={r.unit} warn={r.value > r.limit} />
                </div>
            ))}
        </div>
    );
}

Small

small renders the value at 12px instead of 14px. Use it in dense lists and table-like rows.

import { Label, Metric } from 'jarvis-react-ui';

const ROWS = [
    { label: 'Packets in', value: '12,480', unit: '/s' },
    { label: 'Packets out', value: '9,312', unit: '/s' },
    { label: 'Dropped', value: '214', unit: '/s', warn: true },
];

export default function Small() {
    return (
        <dl className="flex w-full max-w-[240px] flex-col gap-1">
            {ROWS.map((r) => (
                <div key={r.label} className="flex items-baseline justify-between">
                    <dt>
                        <Label>{r.label}</Label>
                    </dt>
                    <dd>
                        <Metric value={r.value} unit={r.unit} warn={r.warn} small />
                    </dd>
                </div>
            ))}
        </dl>
    );
}

Accessibility

• Renders a <span> with the value and a <small> for the unit; it has no role. Native attributes (id, title, aria-*, data-*) are forwarded to the <span>.
• Screen readers read value and unit as one string. Prefer units that read well (ms, %) or name the unit in the label.
• warn is shown by color only. When the warning matters, also say it in text, for example with a Pill.

API

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