dashboardsBeginner

Dashboard Stat Card V2

Stat card variant with chart sparkline.

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: label, big number, delta arrow with percent, and a small inline sparkline at the bottom. Used inside dashboard module grids.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/stats/2.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-dash-stat-2
-->
<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-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
            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
          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="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
            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
          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="text-xs font-medium"> 67.81% </span>
      </div>
    </article>
  </div>
</div>