Simple Stats
A minimalist row of large numbers with clean typography and staggered animations — great as a divider between sections.import React from "react";
import { Box, Typography, Container, useTheme } from "@mui/material";
import { motion } from "motion/react";
const containerVariants = {
hidden: {},
show: {
transition: {
staggerChildren: 0.1,
},
},
};
const itemVariants = {
hidden: { opacity: 0, y: 20 },
show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } },
};
const SimpleStats = () => {
const theme = useTheme();
const isDark = theme.palette.mode === "dark";
return (
<Box
sx={{
backgroundColor: isDark ? "#000" : "#FFF",
color: isDark ? "#FFF" : "#000",
py: { xs: 6, md: 10 },
}}
>
<Container maxWidth="lg">
<motion.div variants={containerVariants} initial="hidden" animate="show">
<Box
sx={{
display: "grid",
gridTemplateColumns: { xs: "1fr 1fr", md: "repeat(4, 1fr)" },
gap: { xs: 4, md: 2 },
px: { xs: 2, sm: 3 },
}}
>
{[
{ value: "1B+", label: "API requests per day" },
{ value: "99.9%", label: "Uptime guaranteed" },
{ value: "<200ms", label: "Median latency" },
{ value: "180+", label: "Countries served" },
].map((stat, i) => (
<motion.div key={i} variants={itemVariants}>
<Box sx={{ display: "flex", flexDirection: "column", gap: 0.5 }}>
<Typography
variant="h3"
sx={{ fontWeight: 500, lineHeight: 1, letterSpacing: "-0.02em" }}
>
{stat.value}
</Typography>
<Typography
variant="body2"
sx={{
fontWeight: 400,
color: isDark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)",
lineHeight: 1.4,
}}
>
{stat.label}
</Typography>
</Box>
</motion.div>
))}
</Box>
</motion.div>
</Container>
</Box>
);
};
export default SimpleStats;
Stats with Icons
A centered stats section with icon badges, large numbers, labels, and subtle column dividers — ideal for trust-building above the fold.import React from "react";
import { Box, Typography, Container, useTheme } from "@mui/material";
import { motion } from "motion/react";
import { FiUsers, FiStar, FiShield, FiTrendingUp } from "react-icons/fi";
const containerVariants = {
hidden: {},
show: {
transition: {
staggerChildren: 0.1,
},
},
};
const itemVariants = {
hidden: { opacity: 0, y: 20 },
show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } },
};
const WithIconsStats = () => {
const theme = useTheme();
const isDark = theme.palette.mode === "dark";
return (
<Box
sx={{
backgroundColor: isDark ? "#000" : "#FFF",
color: isDark ? "#FFF" : "#000",
py: { xs: 6, md: 10 },
}}
>
<Container maxWidth="lg">
<motion.div variants={containerVariants} initial="hidden" animate="show">
<motion.div variants={itemVariants}>
<Box sx={{ px: { xs: 2, sm: 3 }, mb: 6, textAlign: "center" }}>
<Typography
variant="overline"
sx={{
fontWeight: 500,
color: isDark ? "rgba(255,255,255,0.4)" : "rgba(0,0,0,0.4)",
}}
>
Trusted by AI teams globally
</Typography>
</Box>
</motion.div>
<Box
sx={{
display: "grid",
gridTemplateColumns: {
xs: "1fr",
sm: "repeat(2, 1fr)",
md: "repeat(4, 1fr)",
},
px: { xs: 2, sm: 3 },
"& > *:not(:last-child)": {
borderRight: {
md: `1px solid ${isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)"}`,
},
borderBottom: {
xs: `1px solid ${isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)"}`,
md: "none",
},
pb: { xs: 4, md: 0 },
mb: { xs: 4, md: 0 },
},
}}
>
{[
{ icon: FiUsers, value: "50K+", label: "Developers", sublabel: "Building with our API" },
{ icon: FiTrendingUp, value: "10x", label: "Faster shipping", sublabel: "Reported by customers" },
{ icon: FiShield, value: "99.9%", label: "Uptime SLA", sublabel: "Enterprise reliability" },
{ icon: FiStar, value: "4.9", label: "Rating", sublabel: "From 12,000+ reviews" },
].map((stat, i) => (
<motion.div key={i} variants={itemVariants}>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
textAlign: "center",
gap: 1.5,
px: { xs: 0, md: 3 },
}}
>
<Box
sx={{
width: 40,
height: 40,
borderRadius: 1.5,
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.05)",
}}
>
<stat.icon size={18} style={{ opacity: isDark ? 0.8 : 0.7 }} />
</Box>
<Box>
<Typography
variant="h4"
sx={{ fontWeight: 500, lineHeight: 1, letterSpacing: "-0.02em" }}
>
{stat.value}
</Typography>
<Typography
variant="body2"
sx={{ fontWeight: 500, mt: 0.75, color: isDark ? "#FFF" : "#000" }}
>
{stat.label}
</Typography>
<Typography
variant="caption"
sx={{
fontWeight: 400,
display: "block",
color: isDark ? "rgba(255,255,255,0.4)" : "rgba(0,0,0,0.4)",
mt: 0.25,
}}
>
{stat.sublabel}
</Typography>
</Box>
</Box>
</motion.div>
))}
</Box>
</motion.div>
</Container>
</Box>
);
};
export default WithIconsStats;
Card Stats
A 3×2 grid of bordered stat cards with equal heights, icons, numbers, and descriptions — perfect for a dedicated metrics section with full context.import React from "react";
import { Box, Typography, Container, useTheme } from "@mui/material";
import { motion } from "motion/react";
import {
FiUsers,
FiUploadCloud,
FiShield,
FiClock,
FiGlobe,
FiZap,
} from "react-icons/fi";
const containerVariants = {
hidden: {},
show: {
transition: {
staggerChildren: 0.1,
},
},
};
const itemVariants = {
hidden: { opacity: 0, y: 20 },
show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } },
};
const CardsStats = () => {
const theme = useTheme();
const isDark = theme.palette.mode === "dark";
return (
<Box
sx={{
backgroundColor: isDark ? "#000" : "#FFF",
color: isDark ? "#FFF" : "#000",
py: { xs: 6, md: 10 },
}}
>
<Container maxWidth="lg">
<motion.div variants={containerVariants} initial="hidden" animate="show">
<motion.div variants={itemVariants}>
<Box sx={{ px: { xs: 2, sm: 3 }, mb: 6, maxWidth: 520 }}>
<Typography variant="h4" sx={{ fontWeight: 500, mb: 1 }}>
Infrastructure built for AI scale
</Typography>
<Typography
variant="body1"
sx={{
fontWeight: 400,
color: isDark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)",
lineHeight: 1.6,
}}
>
Real numbers from production workloads — not benchmarks.
</Typography>
</Box>
</motion.div>
<Box
sx={{
display: "grid",
gridTemplateColumns: {
xs: "1fr",
sm: "repeat(2, 1fr)",
md: "repeat(3, 1fr)",
},
gap: 1.5,
px: { xs: 2, sm: 3 },
}}
>
{[
{
icon: FiUsers,
value: "50K+",
label: "Developers",
description: "Teams across startups and enterprises ship faster with our platform.",
},
{
icon: FiUploadCloud,
value: "1B+",
label: "Daily API calls",
description: "Handling production AI workloads with zero cold starts.",
},
{
icon: FiShield,
value: "99.9%",
label: "Uptime SLA",
description: "SOC 2 compliant infrastructure with 24/7 monitoring.",
},
{
icon: FiClock,
value: "<200ms",
label: "Median latency",
description: "Low latency inference across all major regions.",
},
{
icon: FiGlobe,
value: "180+",
label: "Countries",
description: "Global edge network with regional data residency.",
},
{
icon: FiZap,
value: "10x",
label: "Faster deployment",
description: "From model to production in minutes, not weeks.",
},
].map((stat, i) => (
<motion.div key={i} variants={itemVariants} style={{ height: "100%" }}>
<Box
sx={{
p: 3,
borderRadius: 2,
border: `1px solid ${isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)"}`,
backgroundColor: isDark ? "rgba(255,255,255,0.02)" : "rgba(0,0,0,0.01)",
display: "flex",
flexDirection: "column",
gap: 1.5,
height: "100%",
transition: "border 0.2s ease-out, background 0.2s ease-out",
"&:hover": {
border: `1px solid ${isDark ? "rgba(255,255,255,0.18)" : "rgba(0,0,0,0.18)"}`,
backgroundColor: isDark ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.02)",
},
}}
>
<Box
sx={{
width: 36,
height: 36,
borderRadius: 1.25,
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.05)",
}}
>
<stat.icon size={16} style={{ opacity: isDark ? 0.75 : 0.65 }} />
</Box>
<Box>
<Typography
variant="h5"
sx={{ fontWeight: 500, lineHeight: 1, letterSpacing: "-0.02em" }}
>
{stat.value}
</Typography>
<Typography variant="body2" sx={{ fontWeight: 600, mt: 0.5 }}>
{stat.label}
</Typography>
</Box>
<Typography
variant="body2"
sx={{
fontWeight: 400,
color: isDark ? "rgba(255,255,255,0.4)" : "rgba(0,0,0,0.4)",
lineHeight: 1.5,
}}
>
{stat.description}
</Typography>
</Box>
</motion.div>
))}
</Box>
</motion.div>
</Container>
</Box>
);
};
export default CardsStats;
Customization
Data Configuration
Customize stats by modifying the array:const stats = [
{ value: "1B+", label: "API requests per day" },
{ value: "99.9%", label: "Uptime guaranteed" },
];
Icons
Use react-icons/fi (Feather Icons) for consistent styling:import { FiUsers, FiStar, FiShield } from "react-icons/fi";
Animation Variants
Adjust animation timing:const containerVariants = {
hidden: {},
show: {
transition: {
staggerChildren: 0.1, // Delay between each stat
},
},
};
Responsive Layouts
All stat sections use responsive grids:gridTemplateColumns: { xs: "1fr 1fr", md: "repeat(4, 1fr)" }