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.
Configurations
5 examplesRising
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
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.
| Prop | Type | Default | Description |
|---|---|---|---|
| labelreq | string | - | Metric name shown as the top-left 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 (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. |
| deltaLabel | string | - | Caption shown beside the delta in the trend row. |
| code | string | - | Optional small 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