New
Stats & KPIsKPI Row
A bare row of headline metrics in a `<dl>` that reflows from one column to four.
#stats#kpi#metrics
3 frameworksBeginner
Loading…
KPI cards where each delta pairs a direction arrow and a hidden word with its colour.
<!--
The delta is a shape + a word + a colour, in that order of importance. The
arrow SVG encodes direction, the sr-only "Increased/Decreased" states it in
words, and the green/red is only the third, redundant cue - so the trend still
reads for a red-green colour-blind user, who is ~8% of men.
-->
<dl class="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
<div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Revenue</dt>
<dd class="mt-2 flex flex-wrap items-baseline gap-x-2 gap-y-1">
<span class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">$48,120</span>
<span class="inline-flex items-center gap-1 text-sm font-semibold text-emerald-600 dark:text-emerald-400">
<svg viewBox="0 0 12 12" class="h-3 w-3" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 9V3M3 6l3-3 3 3" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span class="sr-only">Increased by</span>12.5%
</span>
</dd>
<p class="mt-1 text-xs text-gray-400 dark:text-gray-500">vs last month</p>
</div>
<div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Churn</dt>
<dd class="mt-2 flex flex-wrap items-baseline gap-x-2 gap-y-1">
<span class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">2.1%</span>
<span class="inline-flex items-center gap-1 text-sm font-semibold text-red-600 dark:text-red-400">
<svg viewBox="0 0 12 12" class="h-3 w-3" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 3v6M9 6l-3 3-3-3" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span class="sr-only">Decreased by</span>0.4%
</span>
</dd>
<p class="mt-1 text-xs text-gray-400 dark:text-gray-500">vs last month</p>
</div>
</dl>| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | TrendItem[] | - | The array of items to render. |
className | string | - | Additional classes merged onto the root element. |
The trend is never colour alone: an arrow SVG encodes direction, an `sr-only` "Increased/Decreased" states it, and green/red is only the third, redundant cue - so it reads for a red-green colour-blind user. Pass `direction` per item to flip both arrow and colour.