Stat
A single metric: a prominent value with its label, optional trend delta, and caption.
Live demo
Stat presents one figure at a glance: a large value (the default slot) under a small uppercase label, with an optional delta carrying a trend (up / down / flat) and an optional caption for context. The value and delta render in tabular figures so columns of stats align digit-for-digit.
trend picks the delta's directional arrow; a separate sentiment (positive / negative / neutral) picks its color and defaults to the trend's own reading (up→positive/green, down→negative/red, flat→neutral). Splitting the axes lets an up-is-bad metric (a rising error rate) paint red on an up-arrow, or a sentiment-neutral metric show a direction in a muted tint, while the color is always paired with the arrow so meaning never rides on color alone. Pure presentation: compose several in a Grid or Cluster for a dashboard strip, or drop one into a Card header.
When to use
How this component composes with the rest of the set.
Grid or Cluster for a dashboard strip; the tabular figures keep the values aligned. Card to head a panel with its key number. delta + trend with period-over-period figures; the arrow carries direction without relying on color. trend="up" sentiment="negative"; for a direction that carries no good/bad meaning set sentiment="neutral" to keep the arrow but drop the green/red. Props
8 props, straight from the manifest.
| Prop | Type | Default | Bindings | Description |
|---|---|---|---|---|
Appearance
Sizes
sm
Compact value.
md
Default.
lg
Large display value.
Anatomy
The named parts that make up the component, with their selectors.
stat
The flex-column root carrying the alignment and size classes.
label
The metric name: small, uppercase, and muted, rendered above the value via flex order.
value
The headline figure: display font, bold, tabular, in the primary ink.
delta
The optional change indicator: a directional arrow (from trend) over a base --neutral-text, tinted by sentiment (positive --success-vivid, negative --danger-vivid, neutral --neutral-vivid).
caption
An optional subtle line of context below the value.
Tokens & coverage
What the component consumes, checked live against what the algorithm produces.
Live coverage check against the xtyle-default register
(derive(xtyleDefault, { anchors }) →
coverComponent(manifest, register)). Every token this component
consumes must be a key the algorithm produces.
--danger-vivid
--fg-0
--fg-2
--fg-3
--font-display
--font-sans
--leading-normal
--leading-tight
--neutral-text
--neutral-vivid
--space-1
--space-2
--success-vivid
--text-2xl
--text-3xl
--text-sm
--text-xl
--text-xs
--weight-bold
--weight-semibold
Slots
The metric value.
Accessibility
aria-hidden SVG; the delta's meaning comes from its text. order, while the DOM keeps value-then-label, so a screen reader reads the figure first. Code
Metrics, trends, and sizes
A value under its label, with optional trend deltas and captions, across the three sizes and both alignments, plus the inline ticker layout that lays label, value, and delta on one line.
<xtyle-stat label="Monthly revenue" delta="+12.5%" trend="up" caption="vs. last month">$48,250</xtyle-stat>
<xtyle-stat label="Active themes" delta="-3" trend="down">1,204</xtyle-stat>
<xtyle-stat label="Token coverage" size="lg" align="center">57 / 57</xtyle-stat>
<xtyle-stat label="components" delta="+1" trend="up" inline>49</xtyle-stat><script lang="ts">
import { Stat } from "@xtyle/svelte";
</script>
<Stat label="Monthly revenue" delta="+12.5%" trend="up" caption="vs. last month">$48,250</Stat>
<Stat label="Active themes" delta="-3" trend="down">1,204</Stat>
<Stat label="Token coverage" size="lg" align="center">57 / 57</Stat>
<Stat label="components" delta="+1" trend="up" inline>49</Stat>---
import { Stat } from "@xtyle/astro";
---
<Stat label="Monthly revenue" delta="+12.5%" trend="up" caption="vs. last month">$48,250</Stat>
<Stat label="Active themes" delta="-3" trend="down">1,204</Stat>
<Stat label="Token coverage" size="lg" align="center">57 / 57</Stat>
<Stat label="components" delta="+1" trend="up" inline>49</Stat>Direction vs. sentiment
sentiment colors the delta independently of the trend arrow: an up-is-bad error rate arrows up but reads red, a falling latency arrows down but reads green, and a neutral run-count keeps the arrow without a good/bad tint.
<!-- Up is bad: a rising error rate arrows up but paints red. -->
<xtyle-stat label="Error rate" delta="+2.1%" trend="up" sentiment="negative" caption="last hour">4.8%</xtyle-stat>
<!-- Down is good: latency falling arrows down and paints green. -->
<xtyle-stat label="p95 latency" delta="-18ms" trend="down" sentiment="positive">142ms</xtyle-stat>
<!-- Directional but neutral: a run-count delta shows the arrow in a muted tint, no good/bad. -->
<xtyle-stat label="Runs" delta="-8%" trend="down" sentiment="neutral" caption="24h">312</xtyle-stat>