Stats Card
A compact stats card for React and Tailwind CSS dashboards, showing a KPI value, label, trend indicator and icon. Free, responsive and easy to drop in.
Monthly revenue
$48.2k
▲ 12.5% vs last month
Copy the code
export function StatsCard() {
return (
<div className="w-56 rounded-2xl border border-white/10 bg-white/5 p-5 text-white">
<p className="text-sm text-white/60">Monthly revenue</p>
<p className="mt-1 text-3xl font-extrabold">$48.2k</p>
<p className="mt-1 text-sm text-emerald-400">▲ 12.5% vs last month</p>
</div>
)
}Tailwind CSS · no dependencies · MIT licensed. Paste it straight into any React, Next.js or Vite project.
About the stats card
This stats card is part of Empire UI — a free, open-source library of 26+ component types rendered across 40 visual styles, from glassmorphism to neo-brutalism. Every block is copy-paste ready in React and Tailwind CSS with no runtime dependencies.
Want it in a different look? Browse all 40 styles or grab the matching glassmorphism components.