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…
Metric cards with an inline SVG sparkline drawn from each series.
<!--
The sparkline is decorative shorthand for a trend the numbers already state, so
it is aria-hidden. preserveAspectRatio="none" lets the 100x32 viewBox stretch
to whatever width the card ends up, and vector-effect keeps the stroke 2px wide
when it does - a scaled SVG otherwise fattens the line.
-->
<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">Sessions</dt>
<dd class="mt-1 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">18,420</dd>
<svg viewBox="0 0 100 32" preserveAspectRatio="none" class="mt-3 h-8 w-full text-emerald-500" aria-hidden="true">
<polyline points="0,26 20,20 40,22 60,12 80,14 100,4" fill="none" stroke="currentColor" stroke-width="2" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</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">Bounce rate</dt>
<dd class="mt-1 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">41.2%</dd>
<svg viewBox="0 0 100 32" preserveAspectRatio="none" class="mt-3 h-8 w-full text-red-500" aria-hidden="true">
<polyline points="0,6 20,10 40,8 60,18 80,20 100,28" fill="none" stroke="currentColor" stroke-width="2" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</dl>| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | SparkItem[] | - | The array of items to render. |
className | string | - | Additional classes merged onto the root element. |
The sparkline is `aria-hidden` decoration for a trend the number already states; `preserveAspectRatio="none"` stretches the 100x32 viewBox to any card width while `vector-effect="non-scaling-stroke"` keeps the line 2px. Feed `points` (>= 2 values) and it scales itself.