FeaturedNew
Stats & KPIsTrend Stat Cards
KPI cards where each delta pairs a direction arrow and a hidden word with its colour.
#stats#trend#delta
3 frameworksIntermediate
Loading…
A bare row of headline metrics in a `<dl>` that reflows from one column to four.
<!--
Each stat is a <div> inside a <dl>. The value (dd) is painted above the label
(dt) with order utilities, but the DOM order stays dt-then-dd so a screen
reader announces "Monthly revenue, $48,120", not the number stranded first.
-->
<dl class="grid w-full grid-cols-1 gap-px overflow-hidden rounded-2xl border border-gray-200 bg-gray-200 sm:grid-cols-2 lg:grid-cols-4 dark:border-gray-800 dark:bg-gray-800">
<div class="flex flex-col bg-white p-5 dark:bg-gray-900">
<dt class="order-2 text-sm font-medium text-gray-500 dark:text-gray-400">Monthly revenue</dt>
<dd class="order-1 text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">$48,120</dd>
</div>
<div class="flex flex-col bg-white p-5 dark:bg-gray-900">
<dt class="order-2 text-sm font-medium text-gray-500 dark:text-gray-400">Active users</dt>
<dd class="order-1 text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">12,480</dd>
</div>
<div class="flex flex-col bg-white p-5 dark:bg-gray-900">
<dt class="order-2 text-sm font-medium text-gray-500 dark:text-gray-400">Conversion</dt>
<dd class="order-1 text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">3.8%</dd>
</div>
<div class="flex flex-col bg-white p-5 dark:bg-gray-900">
<dt class="order-2 text-sm font-medium text-gray-500 dark:text-gray-400">Avg. order</dt>
<dd class="order-1 text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">$86.40</dd>
</div>
</dl>| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | KpiItem[] | - | The array of items to render. |
className | string | - | Additional classes merged onto the root element. |
Each metric shows the value above the label via `order-*` while the DOM keeps `dt`-then-`dd`, so it still reads "Monthly revenue, $48,120". The grid steps 1 -> 2 -> 4 columns so four big numbers never crush into one row at 320px.