dashboardsBeginner

Dashboard Stats Strip

Horizontal strip of KPI panels at the top of a dashboard.

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 stats strip with Tailwind: a horizontal row of 4-5 KPI panels at the top of a dashboard. Each panel has a label, big number, and a small trend indicator.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/grids/4.html
  License: MIT
  Surfaced via https://vibedex.io/components/hyperui-dash-grid-4
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="p-6 w-full">
<div class="grid grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-8">
      <div class="h-32 rounded bg-gray-300"></div>
      <div class="h-32 rounded bg-gray-300"></div>
      <div class="h-32 rounded bg-gray-300"></div>
    </div>
  </div>
</div>