Skip to content
HyperUI

No results found.

Back to application components

Stats

Stat block components for displaying key metrics, growth indicators, and performance data in dashboards, admin panels, and analytics pages.

6/6 Dark Mode Updated: Jul 4, 2026

Title, value, from value and themed growth stat

markmead

<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>

Title, value, from value and themed growth stat (Dark)

markmead

<article
  class="flex flex-col gap-4 rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900"
>
  <div
    class="inline-flex gap-2 self-end rounded-sm bg-green-100 p-1 text-green-600 dark:bg-green-700 dark:text-green-50"
  >
    <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 dark:text-gray-400"> Profit </strong>

    <p>
      <span class="text-2xl font-medium text-gray-900 dark:text-white"> $404.32 </span>

      <span class="text-xs text-gray-500 dark:text-gray-400"> from $240.94 </span>
    </p>
  </div>
</article>

<article
  class="flex flex-col gap-4 rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900"
>
  <div
    class="inline-flex gap-2 self-end rounded-sm bg-red-100 p-1 text-red-600 dark:bg-red-700 dark:text-red-50"
  >
    <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 dark:text-gray-400"> Profit </strong>

    <p>
      <span class="text-2xl font-medium text-gray-900 dark:text-white"> $240.94 </span>

      <span class="text-xs text-gray-500 dark:text-gray-400"> from $404.32 </span>
    </p>
  </div>
</article>

Title, value, icon and themed growth stat

markmead

<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>

Title, value, icon and themed growth stat (Dark)

markmead

<article
  class="flex items-end justify-between rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900"
>
  <div class="flex items-center gap-4">
    <span
      class="hidden rounded-full bg-gray-100 p-2 text-gray-600 sm:block dark:bg-gray-800 dark:text-gray-300"
    >
      <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 dark:text-gray-400">Profit</p>

      <p class="text-2xl font-medium text-gray-900 dark:text-white">$240.94</p>
    </div>
  </div>

  <div
    class="inline-flex gap-2 rounded-sm bg-green-100 p-1 text-green-600 dark:bg-green-700 dark:text-green-50"
  >
    <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 dark:border-gray-800 dark:bg-gray-900"
>
  <div class="flex items-center gap-4">
    <span
      class="hidden rounded-full bg-gray-100 p-2 text-gray-600 sm:block dark:bg-gray-800 dark:text-gray-300"
    >
      <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 dark:text-gray-400">Profit</p>

      <p class="text-2xl font-medium text-gray-900 dark:text-white">$240.94</p>
    </div>
  </div>

  <div
    class="inline-flex gap-2 rounded-sm bg-red-100 p-1 text-red-600 dark:bg-red-700 dark:text-red-50"
  >
    <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>

Title, value and themed growth stat

markmead

<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>

Title, value and themed growth stat (Dark)

markmead

<article
  class="flex items-end justify-between rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900"
>
  <div>
    <p class="text-sm text-gray-500 dark:text-gray-400">Profit</p>

    <p class="text-2xl font-medium text-gray-900 dark:text-white">$240.94</p>
  </div>

  <div
    class="inline-flex gap-2 rounded-sm bg-green-100 p-1 text-green-600 dark:bg-green-700 dark:text-green-50"
  >
    <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 dark:border-gray-800 dark:bg-gray-900"
>
  <div>
    <p class="text-sm text-gray-500 dark:text-gray-400">Profit</p>

    <p class="text-2xl font-medium text-gray-900 dark:text-white">$240.94</p>
  </div>

  <div
    class="inline-flex gap-2 rounded-sm bg-red-100 p-1 text-red-600 dark:bg-red-700 dark:text-red-50"
  >
    <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>

Title, value and icon

markmead

<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>

Title, value and icon (Dark)

markmead

<article
  class="flex items-center gap-4 rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900"
>
  <span
    class="rounded-full bg-blue-100 p-3 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400"
  >
    <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 dark:text-white">$240.94</p>

    <p class="text-sm text-gray-500 dark:text-gray-400">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 dark:border-gray-800 dark:bg-gray-900"
>
  <span
    class="rounded-full bg-blue-100 p-3 text-blue-600 sm:order-last dark:bg-blue-500/20 dark:text-blue-400"
  >
    <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 dark:text-white">$240.94</p>

    <p class="text-sm text-gray-500 dark:text-gray-400">Total Sales</p>
  </div>
</article>

Title, value and themed growth stat, stacked style

markmead

<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>

Title, value and themed growth stat, stacked style (Dark)

markmead

<article
  class="rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900"
>
  <div>
    <p class="text-sm text-gray-500 dark:text-gray-400">Profit</p>

    <p class="text-2xl font-medium text-gray-900 dark:text-white">$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 dark:text-gray-400"> Since last week </span>
    </p>
  </div>
</article>

<article
  class="rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900"
>
  <div>
    <p class="text-sm text-gray-500 dark:text-gray-400">Profit</p>

    <p class="text-2xl font-medium text-gray-900 dark:text-white">$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 dark:text-gray-400"> Since last week </span>
    </p>
  </div>
</article>

Title, value, icon and themed growth stat, stacked style

markmead

<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>

Title, value, icon and themed growth stat, stacked style (Dark)

markmead

<article
  class="rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900"
>
  <div class="flex items-center justify-between">
    <div>
      <p class="text-sm text-gray-500 dark:text-gray-400">Profit</p>

      <p class="text-2xl font-medium text-gray-900 dark:text-white">$240.94</p>
    </div>

    <span
      class="rounded-full bg-blue-100 p-3 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400"
    >
      <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 dark:text-gray-400"> Since last week </span>
    </p>
  </div>
</article>

<article
  class="rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900"
>
  <div class="flex items-center justify-between">
    <div>
      <p class="text-sm text-gray-500 dark:text-gray-400">Profit</p>

      <p class="text-2xl font-medium text-gray-900 dark:text-white">$240.94</p>
    </div>

    <span
      class="rounded-full bg-blue-100 p-3 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400"
    >
      <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 dark:text-gray-400"> Since last week </span>
    </p>
  </div>
</article>

Related components

View all application components