Stats 2
Stats 2 is a React and Tailwind CSS data component from SmoothUI, licensed MIT. Copy it and paste it into your project.
SmoothUI
MIT
data
What it is
Stats 2 is a React and Tailwind CSS data component from SmoothUI, licensed MIT. Copy it and paste it into your project.
How to use it
Open it in the catalogue, press copy, and paste it into your project. The prompt you copy carries the code and the rules that tell your agent to reproduce it without changing anything.
Five free copies a month. No card.
Needs
npm i lucide-react motion
Licence
This component comes from SmoothUI and is redistributed under the MIT licence, which permits commercial use. The copyright notice travels with the code.
Stats 2
"use client";
import { DollarSign, Smartphone, Star, Users } from "lucide-react";
import { motion, useInView, useReducedMotion } from "motion/react";
import React, { useRef } from "react";
const STAGGER_DELAY = 0.1;
const ICON_STAGGER_OFFSET = 0.2;
const VALUE_DELAY_OFFSET = 0.3;
const TREND_STAGGER_OFFSET = 0.5;
interface StatsCardsProps {
description?: string;
stats?: Array<{
value: string;
label: string;
description?: string;
icon?: string;
trend?: {
value: string;
direction: "up" | "down";
};
}>;
title?: string;
}
const iconMap = {
DollarSign,
Smartphone,
Star,
Users,
};
export function StatsCards({
title = "Key Metrics",
description = "Track your success with these important numbers",
stats = [
{
description: "Annual recurring revenue",
icon: "DollarSign",
label: "Revenue",
trend: { direction: "up", value: "+12%" },
value: "2.5M",
},
{
description: "Happy customers worldwide",
icon: "Users",
label: "Customers",
trend: { direction: "up", value: "+8%" },
value: "45K",
},
{
description: "Customer satisfaction rate",
icon: "Star",
label: "Satisfaction",
trend: { direction: "up", value: "+2%" },
value: "98%",
},
{
description: "Total app downloads",
icon: "Smartphone",
label: "Downloads",
trend: { direction: "up", value: "+15%" },
value: "1.2M",
},
],
}: StatsCardsProps) {
const ref = useRef(null);
const isInView = useInView(ref, { once: true });
const shouldReduceMotion = useReducedMotion();
return (
<section className="py-20">
<div className="mx-auto max-w-7xl px-6">
<motion.div
className="mb-16 text-center"
initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6 }}
viewport={{ once: true }}
whileInView={
shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
}
>
<h2 className="mb-4 font-bold text-3xl text-foreground lg:text-4xl">
{title}
</h2>
<p className="mx-auto max-w-2xl text-foreground/70 text-lg">
{description}
</p>
</motion.div>
<div
className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4"
ref={ref}
>
{stats.map((stat, index) => (
<motion.div
animate={(() => {
if (shouldReduceMotion) {
return { opacity: 1 };
}
return isInView
? { opacity: 1, scale: 1, y: 0 }
: { opacity: 0, scale: 0.9, y: 30 };
})()}
className="group relative overflow-hidden rounded-2xl border border-border bg-gradient-to-br from-background to-background/50 p-6 transition-all hover:scale-105 hover:border-brand hover:shadow-xl"
initial={
shouldReduceMotion
? { opacity: 1 }
: { opacity: 0, scale: 0.9, y: 30 }
}
key={stat.label}
transition={
shouldReduceMotion
? { duration: 0 }
: {
delay: index * STAGGER_DELAY,
duration: 0.6,
stiffness: 100,
type: "spring" as const,
}
}
>
{/* Icon */}
<motion.div
animate={(() => {
if (shouldReduceMotion) {
return { rotate: 0, scale: 1 };
}
return isInView
? { rotate: 0, scale: 1 }
: { rotate: -10, scale: 0.8 };
})()}
className="mb-4 text-3xl"
initial={
shouldReduceMotion
? { rotate: 0, scale: 1 }
: { rotate: -10, scale: 0.8 }
}
transition={
shouldReduceMotion
? { duration: 0 }
: {
delay: index * STAGGER_DELAY + ICON_STAGGER_OFFSET,
duration: 0.6,
stiffness: 200,
type: "spring" as const,
}
}
>
{React.createElement(
iconMap[stat.icon as keyof typeof iconMap] || DollarSign,
{
className: "h-8 w-8",
}
)}
</motion.div>
{/* Value */}
<motion.div
animate={(() => {
if (shouldReduceMotion) {
return { scale: 1 };
}
return isInView ? { scale: 1 } : { scale: 0.5 };
})()}
className="mb-1 font-bold text-2xl text-foreground lg:text-3xl"
initial={shouldReduceMotion ? { scale: 1 } : { scale: 0.5 }}
transition={
shouldReduceMotion
? { duration: 0 }
: {
delay: index * STAGGER_DELAY + VALUE_DELAY_OFFSET,
duration: 0.8,
stiffness: 200,
type: "spring" as const,
}
}
>
{stat.value}
</motion.div>
{/* Label */}
<h3 className="mb-2 font-semibold text-foreground text-sm uppercase tracking-wide">
{stat.label}
</h3>
{/* Description */}
{stat.description ? (
<p className="mb-3 text-foreground/70 text-xs">
{stat.description}
</p>
) : null}
{/* Trend */}
{stat.trend ? (
<motion.div
animate={(() => {
if (shouldReduceMotion) {
return { opacity: 1 };
}
return isInView
? { opacity: 1, x: 0 }
: { opacity: 0, x: -10 };
})()}
className={`inline-flex items-center rounded-full px-2 py-1 font-medium text-xs ${
stat.trend.direction === "up"
? "bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400"
: "bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400"
}`}
initial={
shouldReduceMotion ? { opacity: 1 } : { opacity: 0, x: -10 }
}
transition={
shouldReduceMotion
? { duration: 0 }
: {
delay: index * STAGGER_DELAY + TREND_STAGGER_OFFSET,
duration: 0.4,
}
}
>
<span className="mr-1">
{stat.trend.direction === "up" ? "↗" : "↘"}
</span>
{stat.trend.value}
</motion.div>
) : null}
{/* Hover effect background */}
<motion.div
className="absolute inset-0 bg-gradient-to-br from-brand/10 via-transparent to-transparent opacity-0 group-hover:opacity-100"
initial={{ opacity: 0 }}
transition={{ duration: 0.3 }}
whileHover={{ opacity: 1 }}
/>
</motion.div>
))}
</div>
</div>
</section>
);
}
export default StatsCards;