Skip to main content
xoji

Stat
Info:Display html svelte astro Success: coverage 20/20

A single metric: a prominent value with its label, optional trend delta, and caption.

Live demo

live · @xoji/astro

Stat

A dashboard strip
$48,250Monthly revenue+12.5%vs. last month
1,204Active themes+8this week
17Churned-3vs. last month
57 / 57Token coverage0held steady

Trends carry direction, not just color
920Up+24.1%
312Down-6.4%
488Flat0.0%

Three sizes, two alignments
3.2kSmall
3.2kMedium
3.2kLarge

align="center"
8,402Sessions+11%
4m 18sAvg. timeper session
31%Bounce-2%

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.

The trend tints the delta (success for up, danger for down, neutral for flat) and pairs the color with a directional 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.

Lay several in a Grid or Cluster for a dashboard strip; the tabular figures keep the values aligned.
Drop one into a Card to head a panel with its key number.
Pair the delta + trend with period-over-period figures; the arrow carries direction without relying on color.

Props

7 props, straight from the manifest.

PropTypeDefaultBindingsDescription
label string —
html svelte astro
The metric name rendered above the value.
delta string —
html svelte astro
An optional change indicator (e.g. `+12.5%`) rendered below the value with a trend arrow.
trend StatTrend
up down flat
flat
html svelte astro
Colors the delta and picks its arrow: success/up, danger/down, neutral/flat.
caption string —
html svelte astro
An optional subtle line of context below the value.
size Size
sm md lg
md
html svelte astro
Scales the value (`sm` → `xl`, `md` → `2xl`, `lg` → `3xl`).
align StatAlign
start center
start
html svelte astro
Block alignment of the stat's contents.
inline boolean false
html svelte astro
Lays the stat out horizontally — label, value, and trend delta on one baseline, like a ticker — for a status strip or a dense row instead of a dashboard tile.

Appearance

Sizes

sm
.xoji-stat--sm

Compact value.

md

 default
.xoji-stat

Default.

lg
.xoji-stat--lg

Large display value.

Anatomy

The named parts that make up the component, with their selectors.

stat

 .xoji-stat

The flex-column root carrying the alignment and size classes.
--font-sans --space-1

label

 .xoji-stat__label

The metric name: small, uppercase, and muted, rendered above the value via flex order.
--text-xs --weight-semibold --leading-normal --fg-2

value

 .xoji-stat__value

The headline figure: display font, bold, tabular, in the primary ink.
--font-display --text-xl --text-2xl --text-3xl --weight-bold --leading-tight --fg-0

delta

 .xoji-stat__delta

The optional change indicator with a directional arrow, tinted by trend.
--text-sm --weight-semibold --space-1 --neutral-text --success-text --danger-text

caption

 .xoji-stat__caption

An optional subtle line of context below the value.
--text-xs --leading-normal --fg-3

Tokens & coverage

What the component consumes, checked live against what the algorithm produces.

Success:fully covered 20/20 consumed tokens produced default register: 276 tokens

Live coverage check against the xoji-default register (derive(xojiDefault, { 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
default
html svelte astro

The metric value.

Accessibility
The trend pairs its color with a directional arrow (▲ up, ▼ down, — flat), so the change reads without color perception (WCAG 1.4.1).
The arrow glyph is a decorative aria-hidden SVG; the delta's meaning comes from its text.
Order is visual only; the label sits above the value via flex 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.

 
<xoji-stat label="Monthly revenue" delta="+12.5%" trend="up" caption="vs. last month">$48,250</xoji-stat>

<xoji-stat label="Active themes" delta="-3" trend="down">1,204</xoji-stat>

<xoji-stat label="Token coverage" size="lg" align="center">57 / 57</xoji-stat>

<xoji-stat label="components" delta="+1" trend="up" inline>49</xoji-stat>
 
<script lang="ts">
	import { Stat } from "@xoji/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 "@xoji/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>