dashboardsBeginner

Dashboard Stat Card V5

Stat card with progress bar.

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 numeric value, and a progress bar at the bottom showing progress toward a goal.

Code

html

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

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

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