Readout

● LIVE

Throughput

SEC // 0x4A2

req/s

12.4%

Latency

SEC // 0x4A3

3.1%

Uptime

SEC // 0x4A4

"use client";import { Readout } from "@/registry/okibi/ui/readout";import { MotionNumber } from "@/registry/okibi/ui/motion-number";export default function ReadoutDemo() {  return (    <div className="flex flex-wrap justify-center gap-4">      <Readout        label="Throughput"        value={<MotionNumber value={847} />}        unit="req/s"        delta={12.4}        index="SEC // 0x4A2"      />      <Readout        label="Latency"        value={<MotionNumber value={38} />}        unit="ms"        delta={-3.1}        index="SEC // 0x4A3"      />      <Readout        label="Uptime"        value={<MotionNumber value={99.9} decimals={1} />}        unit="%"        delta={0}        index="SEC // 0x4A4"      />    </div>  );}

npx shadcn@latest add https://okibi.cndr.dev/r/readout.json

Installation

Install the theme first, then add the component:

npx shadcn@latest add https://okibi.cndr.dev/r/readout.json

Install the required dependencies:

npm install lucide-react

Copy the source from the Code tab above into components/ui/readout.tsx. It uses the cn helper and the okibi theme tokens — install the theme first if you haven't.

Usage

import { Readout } from "@/components/ui/readout"

<Readout label="Uplink" value={1280} unit="kb/s" delta={12} index="SEC // 0x4A2" />

Examples

Delta

A signed delta draws the trend arrow and colors it — signal up, destructive down.

● LIVE

Flux

SEC // 0x4A2

847kW

12.4%

Latency

SEC // 0x4A3

38ms

3.1%

"use client";import { Readout } from "@/registry/okibi/ui/readout";export default function DeltaDemo() {  return (    <div className="flex flex-wrap justify-center gap-4">      <Readout        label="Flux"        value="847"        unit="kW"        delta={12.4}        index="SEC // 0x4A2"      />      <Readout        label="Latency"        value="38"        unit="ms"        delta={-3.1}        index="SEC // 0x4A3"      />    </div>  );}

Grid

Tile several readouts into an instrument panel; each takes its own index, unit, and value.

● LIVE

Core Temp

CH // 0x01

64.2°C

Flux

CH // 0x02

847kW

Uplink

CH // 0x03

1.2Gb/s

Latency

CH // 0x04

38ms

"use client";import { Readout } from "@/registry/okibi/ui/readout";export default function GridDemo() {  return (    <div className="grid w-full max-w-2xl grid-cols-2 gap-3 sm:grid-cols-4">      <Readout label="Core Temp" value="64.2" unit="°C" index="CH // 0x01" />      <Readout label="Flux" value="847" unit="kW" index="CH // 0x02" />      <Readout label="Uplink" value="1.2" unit="Gb/s" index="CH // 0x03" />      <Readout label="Latency" value="38" unit="ms" index="CH // 0x04" />    </div>  );}

Minimal

The minimal form — only label and value, no unit, delta, or index.

● LIVE

Sessions

1,204

"use client";import { Readout } from "@/registry/okibi/ui/readout";export default function ReadoutSimpleDemo() {  return (    <div className="flex justify-center">      <Readout label="Sessions" value="1,204" />    </div>  );}

Long value

A long value wraps within a constrained column instead of overflowing the panel.

● LIVE

Aggregate Request Throughput Per Region

SEC // 0xDEADBEEF

1,204,889,376req/s

8.2%

"use client";import { Readout } from "@/registry/okibi/ui/readout";export default function ReadoutOverflowDemo() {  return (    <div className="flex justify-center">      <div className="w-44 max-w-full">        <Readout          label="Aggregate Request Throughput Per Region"          value="1,204,889,376"          unit="req/s"          delta={8.2}          index="SEC // 0xDEADBEEF"        />      </div>    </div>  );}

API Reference

Prop	Type	Default	Description
`label`	`string`	–	Uppercase UI label.
`value`	`ReactNode`	–	Big display value.
`unit`	`string`	–	Muted unit suffix after the value.
`delta`	`number`	–	Signed delta — drives the direction arrow + color.
`index`	`string`	–	Mono index annotation, top-right.

Accessibility

The direction arrow is aria-hidden; the delta carries an sr-only word ("increase" / "decrease" / "no change") so trend is never conveyed by color or icon alone.
The delta pill uses accent colors as fills with *-foreground text, meeting contrast in both dark and light ("bone poster") modes.
Readout is static markup. If the value updates live (e.g. a MotionNumber count-up), wrap it in your own role='status' / aria-live='polite' region — the component does not announce changes for you.
Pass a meaningful label; it is the metric's accessible name, read in order with the value, unit and delta.

Guidelines

Use it for a single HUD metric — a label over one big display value, optionally annotated with unit, delta and index.
Reach for the index slot (rendered through CoordLabel) for the mono coordinate, not for essential reading content.
Own the live region yourself when the value animates, so assistive tech hears the update.

Don't

Do not lean on the colored delta pill alone to signal good/bad — the sr-only word and the value carry the real meaning.
Do not stuff sentences or interactive controls into value; it is a compact, oversized number, not a content slot.

Readout

On this page