Components
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.
Loading preview...
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>
);
}