dashboardsBeginner

Dashboard Stat Card V4

Stat card with comparative metric.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a stat card with Tailwind: a primary metric on top (big number) and a comparative metric below (e.g. 'vs last month: +12%'). Useful in dashboard rows.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/stats/4.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-dash-stat-4
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="mx-auto flex max-w-lg flex-col gap-4 p-6 w-full">
<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
          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
          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>
  </div>
</div>