Components
Stats Card A responsive card component designed to display a collection of key statistics. Each stat features a value, a label, and an associated icon. The component includes a subtle, staggered animation for each stat item, triggering as it enters the viewport. It is fully theme-adaptive, using shadcn/ui CSS variables for colors and styling.
Loading preview...
import { StatsCard } from "@/components/ui/stats-card-3"; // Adjust the import path
import { Store, MapPin, CalendarCheck2 } from "lucide-react"; // Using lucide-react for icons
// Component to render the icons with specific styling
const StatIcon = ({ children }: { children: React.ReactNode }) => (
<div className="h-14 w-14 text-red-500/90">{children}</div>
);
// Data for the stats card, making it easy to manage and update
const statsData = [
{
value: "3,00,000+",
label: "restaurants",
icon: (
<StatIcon>
<Store className="h-full w-full" strokeWidth={1.5} />
</StatIcon>
),
},
{
value: "800+",
label: "cities",
icon: (
<StatIcon>
<MapPin className="h-full w-full" strokeWidth={1.5} />
</StatIcon>
),
},
{
value: "3 billion+",
label: "orders delivered",
icon: (
<StatIcon>
<CalendarCheck2 className="h-full w-full" strokeWidth={1.5} />
</StatIcon>
),
},
];
// The demo component
export default function StatsCardDemo() {
return (
<div className="flex min-h-[300px] w-full items-center justify-center bg-background p-4">
<StatsCard stats={statsData} />
</div>
);
}