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…
A titled panel wrapping a divided row of KPIs with optional deltas.
<section class="w-full overflow-hidden rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
<div class="flex flex-wrap items-center justify-between gap-2 border-b border-gray-200 px-5 py-4 dark:border-gray-800">
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Overview</h3>
<p class="text-xs text-gray-500 dark:text-gray-400">Last 30 days</p>
</div>
<dl class="grid grid-cols-1 divide-y divide-gray-200 sm:grid-cols-2 sm:divide-y-0 sm:divide-x lg:grid-cols-4 dark:divide-gray-800">
<div class="p-5">
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Revenue</dt>
<dd class="mt-1 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">$48,120</dd>
<p class="mt-1 inline-flex items-center gap-1 text-xs 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%
</p>
</div>
</dl>
</section>| Prop | Type | Default | Description |
|---|---|---|---|
title | string | 'Overview' | Heading text for the card. |
caption | string | - | The table's caption, announced to screen readers before its contents. |
itemsrequired | SummaryItem[] | - | The array of items to render. |
className | string | - | Additional classes merged onto the root element. |
A header with `title` and `caption` sits over a `<dl>` whose cells are separated by `divide-*` - dividers switch from horizontal on mobile to vertical from `sm:` up as the row reflows 1 -> 2 -> 4. Each delta stays accessible via arrow plus hidden word.