Stat Tile
Stat readout built on Card. Big numeric value, optional unit, optional ▲/▼ delta whose glyph carries the direction and whose color carries the judgment: set polarity to lower-is-better and a falling response time reads as the improvement it is, or none for a reading with no good/bad sense. Scroll-aware count-up on first view, a live mode that snaps to new values, a per-digit odometer roll (liveRoll), and a top-right code identifier prop.
ThroughputREQ-01
0rps
▲ 2.4vs prior period
LatencyLAT-02
0ms
▼ 1.2vs prior period
ErrorsERR-03
0%
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/andromeda-stat-tileProps
Every prop this component accepts. Any other prop is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| labelreq | string | - | Metric name shown in the top-left mono caption. |
| valuereq | string|number | - | Primary figure rendered as the large number, counted up from zero on reveal. |
| unit | string | - | Short unit rendered beside the value. |
| delta | number | - | Signed change. The ▲/▼ glyph always states the direction of the move; `polarity` decides whether that move is coloured as good (accent) 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. |
| deltaLabel | string | - | Caption shown beside the delta in the trend row. |
| code | string | - | Optional small mono identifier in the top-right. |
| live | boolean | false | When 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. |
| liveRoll | boolean | false | When 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. |
| className | string | - | Extra classes merged onto the root Card. |
| style | React.CSSProperties | - | Inline styles merged onto the root Card. |
AI Canvas