Stat Tile

Displays one headline number with its unit and its change.

ThroughputREQ-01
0rps
▲ 2.4vs prior period

Configurations

Supported configurations for this component.

RisingFalling, lower is betterFalling, higher is betterNo deltaLive driftLarge, prefix and suffixBare, caption below

Configurations

7 examples
Rising
ThroughputREQ-01
0rps
▲ 2.4vs prior period
Falling, lower is better
LatencyLAT-02
0ms
▼ 1.2vs prior period
Falling, higher is better
UptimeUP-04
0%
▼ 0.4vs prior period
No delta
ErrorsERR-03
0%
Live drift
SignalSIG-05
0dB
Large, prefix and suffix
VolumeVOL-06
$0B
▲ 3.1vs last year
Bare, caption below
0M
People and teams on board

Add to your project

One command adds this component to your project.

1

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Props

Every prop this component accepts. Any other prop is forwarded to the underlying element.

PropTypeDefaultDescription
labelreqstring-Metric name shown as the top-left caption.
valuereqstring|number-Primary figure rendered as the large number, counted up from zero on reveal.
unitstring-Short unit rendered beside the value.
deltanumber-Signed change. The ▲/▼ glyph always states the direction of the move; `polarity` decides whether that move is coloured as good (brand) or bad (fault). Exactly 0 is neutral: no glyph, muted.
polarity'higher-is-better'|'lower-is-better'|'none''higher-is-better'Which direction is the good one for this metric. `'lower-is-better'` for response time, latency, error rate, incident count — a drop there is an improvement and must not render red. `'none'` for readings with no good/bad sense at all (demand, headcount, temperature): the arrow still states the move, the delta stays muted.
deltaLabelstring-Caption shown beside the delta in the trend row.
codestring-Optional small identifier in the top-right.
livebooleanfalseWhen true, the count-up animation runs only on first mount; subsequent value changes snap (no re-animation). Use for telemetry rows whose values update on a recurring interval. Without this, each refresh runs a fresh 1.8s count-up from zero, which is unreadable.
liveRollbooleanfalseWhen true, the value is rendered as a row of fixed-width digit slots; on update, only the slots whose character changed "roll" (previous translates up + fades, new enters from below). Use for high-frequency telemetry where the eye should track which digits moved (price ticks, latency counters, throughput rates). Overrides `live`. Initial render fades in without rolling.
prefixstring-Text held still before the value, in the value's face ('$' in '$12B'). Only the number counts up.
suffixstring-Text held still after the value, in the value's face ('B' in '$12B', '/7' in '24/7'). Unlike `unit`, it is part of the figure.
size'md'|'lg''md'Readout step: `md` = displayMd, `lg` = displayLg for headline figures on a marketing band.
labelPosition'top'|'bottom''top'`top` = the uppercase micro-label above the value; `bottom` = a one-line textSm caption under it, ellipsised.
barebooleanfalseDrops the tile's own frame (no Card surface, no corner markers, no padding) so tiles sit inside a surface the caller owns.
classNamestring-Extra classes merged onto the root (Card, or the plain div when `bare`).
styleReact.CSSProperties-Inline styles merged onto the root.

More Andromeda Pro components

Strength Meter

Reports how strong a password is, in three steps and one word.

3 variants

Suggestion

Offers a proposed next move the reader can take, such as a follow-up prompt or a task lane.

3 variants3 states

Tabs

Splits content into named panels and shows one at a time, as a row of tabs or a list whose rows can each carry a sentence.

3 variants2 states