Numeric

Markdown

A figure in the numeric face with its qualifier in words, so numbers line up across a screen.

Use it for
One figure with what it means beside it: a duration, a count, a delta.
Not for
A labelled metric in a row of metrics. Try Stat.

Numeric preview

11.4 hvs September

Installation

npm install @stackunseen/ui
import { Numeric } from '@stackunseen/ui';
Styles: @stackunseen/ui/styles.css

Usage and props

Format the figure and its sign in the application. Tone only backs up a sign that is already in the text. Stat, ElapsedTime and ToolCall durations use the same face, set with --ai-font-numeric.

Supported inputs

This is the public signature used by this example. Open Code to see how the values and callbacks fit together.

value · qualifier? · size?: lg | md | sm · tone?: neutral | up | down | primary
How state and callbacks work
All props

Loading…

For your coding agent

Give the agent this page instead of a screenshot. The prompt wraps the page with the install and import lines and the rule that your server, not a click, completes an action.

Contract
value · qualifier? · size?: lg | md | sm · tone?: neutral | up | down | primary
Keeps honest
Format the figure and its sign in the application. Tone only backs up a sign that is already in the text. Stat, ElapsedTime and ToolCall durations use the same face, set with --ai-font-numeric.
MCP
read_component "Numeric" on the docs endpoint
Open the Markdown file

Keyboard and customization

Keyboard

Inert content; it adds no tab stop.

Customization

Change shared colors, spacing, corners and icons with the theme. Use the component's supported props to adapt its content and layout. Customization guide and Theme Studio