Back to application components
Stats
Stat block components for displaying key metrics, growth indicators, and performance data in dashboards, admin panels, and analytics pages.
Updated: Jul 4, 2026
<article class="flex flex-col gap-4 rounded-lg border border-gray-100 bg-white p-6">
<div class="inline-flex gap-2 self-end rounded-sm bg-green-100 p-1 text-green-600">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
/>
</svg>
<span class="sr-only">Increase: </span>
<span class="text-xs font-medium"> 67.81% </span>
</div>
<div>
<strong class="block text-sm font-medium text-gray-500"> Profit </strong>
<p>
<span class="text-2xl font-medium text-gray-900"> $404.32 </span>
<span class="text-xs text-gray-500"> from $240.94 </span>
</p>
</div>
</article>
<article class="flex flex-col gap-4 rounded-lg border border-gray-100 bg-white p-6">
<div class="inline-flex gap-2 self-end rounded-sm bg-red-100 p-1 text-red-600">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"
/>
</svg>
<span class="sr-only">Decrease: </span>
<span class="text-xs font-medium"> 67.81% </span>
</div>
<div>
<strong class="block text-sm font-medium text-gray-500"> Profit </strong>
<p>
<span class="text-2xl font-medium text-gray-900"> $240.94 </span>
<span class="text-xs text-gray-500"> from $404.32 </span>
</p>
</div>
</article><article class="flex items-end justify-between rounded-lg border border-gray-100 bg-white p-6">
<div class="flex items-center gap-4">
<span class="hidden rounded-full bg-gray-100 p-2 text-gray-600 sm:block">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"
/>
</svg>
</span>
<div>
<p class="text-sm text-gray-500">Profit</p>
<p class="text-2xl font-medium text-gray-900">$240.94</p>
</div>
</div>
<div class="inline-flex gap-2 rounded-sm bg-green-100 p-1 text-green-600">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
/>
</svg>
<span class="sr-only">Increase: </span>
<span class="text-xs font-medium"> 67.81% </span>
</div>
</article>
<article class="flex items-end justify-between rounded-lg border border-gray-100 bg-white p-6">
<div class="flex items-center gap-4">
<span class="hidden rounded-full bg-gray-100 p-2 text-gray-600 sm:block">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"
/>
</svg>
</span>
<div>
<p class="text-sm text-gray-500">Profit</p>
<p class="text-2xl font-medium text-gray-900">$240.94</p>
</div>
</div>
<div class="inline-flex gap-2 rounded-sm bg-red-100 p-1 text-red-600">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"
/>
</svg>
<span class="sr-only">Decrease: </span>
<span class="text-xs font-medium"> 67.81% </span>
</div>
</article><article class="flex items-end justify-between rounded-lg border border-gray-100 bg-white p-6">
<div>
<p class="text-sm text-gray-500">Profit</p>
<p class="text-2xl font-medium text-gray-900">$240.94</p>
</div>
<div class="inline-flex gap-2 rounded-sm bg-green-100 p-1 text-green-600">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
/>
</svg>
<span class="sr-only">Increase: </span>
<span class="text-xs font-medium"> 67.81% </span>
</div>
</article>
<article class="flex items-end justify-between rounded-lg border border-gray-100 bg-white p-6">
<div>
<p class="text-sm text-gray-500">Profit</p>
<p class="text-2xl font-medium text-gray-900">$240.94</p>
</div>
<div class="inline-flex gap-2 rounded-sm bg-red-100 p-1 text-red-600">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"
/>
</svg>
<span class="sr-only">Decrease: </span>
<span class="text-xs font-medium"> 67.81% </span>
</div>
</article><article class="flex items-center gap-4 rounded-lg border border-gray-100 bg-white p-6">
<span class="rounded-full bg-blue-100 p-3 text-blue-600">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-8"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"
/>
</svg>
</span>
<div>
<p class="text-2xl font-medium text-gray-900">$240.94</p>
<p class="text-sm text-gray-500">Total Sales</p>
</div>
</article>
<article
class="flex items-center gap-4 rounded-lg border border-gray-100 bg-white p-6 sm:justify-between"
>
<span class="rounded-full bg-blue-100 p-3 text-blue-600 sm:order-last">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-8"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"
/>
</svg>
</span>
<div>
<p class="text-2xl font-medium text-gray-900">$240.94</p>
<p class="text-sm text-gray-500">Total Sales</p>
</div>
</article><article class="rounded-lg border border-gray-100 bg-white p-6">
<div>
<p class="text-sm text-gray-500">Profit</p>
<p class="text-2xl font-medium text-gray-900">$240.94</p>
</div>
<div class="mt-1 flex gap-1 text-green-600">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
/>
</svg>
<span class="sr-only">Increase: </span>
<p class="flex gap-2 text-xs">
<span class="font-medium"> 67.81% </span>
<span class="text-gray-500"> Since last week </span>
</p>
</div>
</article>
<article class="rounded-lg border border-gray-100 bg-white p-6">
<div>
<p class="text-sm text-gray-500">Profit</p>
<p class="text-2xl font-medium text-gray-900">$240.94</p>
</div>
<div class="mt-1 flex gap-1 text-red-600">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"
/>
</svg>
<span class="sr-only">Decrease: </span>
<p class="flex gap-2 text-xs">
<span class="font-medium"> 67.81% </span>
<span class="text-gray-500"> Since last week </span>
</p>
</div>
</article><article class="rounded-lg border border-gray-100 bg-white p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500">Profit</p>
<p class="text-2xl font-medium text-gray-900">$240.94</p>
</div>
<span class="rounded-full bg-blue-100 p-3 text-blue-600">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-8"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"
/>
</svg>
</span>
</div>
<div class="mt-1 flex gap-1 text-green-600">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
/>
</svg>
<span class="sr-only">Increase: </span>
<p class="flex gap-2 text-xs">
<span class="font-medium"> 67.81% </span>
<span class="text-gray-500"> Since last week </span>
</p>
</div>
</article>
<article class="rounded-lg border border-gray-100 bg-white p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500">Profit</p>
<p class="text-2xl font-medium text-gray-900">$240.94</p>
</div>
<span class="rounded-full bg-blue-100 p-3 text-blue-600">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-8"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"
/>
</svg>
</span>
</div>
<div class="mt-1 flex gap-1 text-red-600">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"
/>
</svg>
<span class="sr-only">Decrease: </span>
<p class="flex gap-2 text-xs">
<span class="font-medium"> 67.81% </span>
<span class="text-gray-500"> Since last week </span>
</p>
</div>
</article>