About
Flat Linear-style stat card with optional Lucide icon and a 5-color accent palette (navy/gold/emerald/red/muted). Framed or inline modes. Use for dashboard summary strips and KPI tiles.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Stat Card to your project and fits it to your theme.
Code
How Stat Card is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { TrendingUp, AlertTriangle, Package, Clock } from "lucide-react";
import StatCard from "@/components/ui/statcard";
export default function Demo() {
return (
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 p-6 bg-slate-50">
<StatCard label="Today's revenue" value="₦44,000" accent="navy" icon={TrendingUp} />
<StatCard label="Ready to deliver" value="4" accent="gold" icon={Package} />
<StatCard label="Stale" value="3" accent="red" icon={Clock} />
<StatCard label="Failed" value="0" accent="muted" icon={AlertTriangle} />
</div>
);
}