Explore Tailwind CSS stat section examples to display key metrics and important numbers for your product or service. These blocks include a variety of layouts and styles to help you present data clearly and effectively.
"use client";
import { Badge, Card, Text } from "@hummingbirdui/react";
const stats = [
{
label: "Total Users",
value: "71,897",
from: "from 64k",
change: "+12%",
color: "success",
},
{
label: "Avg. Session Time",
value: "4m 32s",
change: "+2.1%",
color: "success",
},
{ label: "Bounce Rate", value: "24.57%", change: "-4.3%", color: "danger" },
{ label: "Total Revenue", value: "$42.1k", change: "+18%", color: "success" },
] as const;
export default function Stat1() {
return (
<div className="px-6 py-10 max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
{stats.map((stat) => (
<Card
key={stat.label}
className="p-6 border border-subtle overflow-hidden rounded-xl"
>
<div className="flex items-center justify-between w-full mb-3">
<Text
size="sm"
fontWeight="medium"
truncate
className="text-subtle mb-0"
>
{stat.label}
</Text>
<Badge variant="subtle" color={stat.color}>
{stat.change}
</Badge>
</div>
{"from" in stat ? (
<span className="flex items-baseline text-2xl font-semibold text-default">
{stat.value}
<span className="ms-2 text-sm font-medium text-subtle">
{stat.from}
</span>
</span>
) : (
<span className="text-2xl font-semibold text-default">
{stat.value}
</span>
)}
</Card>
))}
</div>
);
}"use client";
import { ArrowRight, Check, Clock, Users } from "lucide-react";
import { Card, Text } from "@hummingbirdui/react";
import { cn } from "@hummingbirdui/react/utils";
const stats = [
{
label: "Active Users",
value: "8,940",
change: "+14.2%",
caption: "growth this week",
trend: "up",
icon: Users,
iconClassName: "bg-primary-lighter text-primary",
},
{
label: "Conversion Rate",
value: "3.87%",
change: "+1.1%",
caption: "since yesterday",
trend: "up",
icon: ArrowRight,
iconClassName: "bg-secondary-lighter text-secondary",
},
{
label: "Avg. Session Time",
value: "5m 24s",
change: "-0.8%",
caption: "drop from last week",
trend: "down",
icon: Clock,
iconClassName: "bg-warning-lighter text-warning",
},
{
label: "New Signups",
value: "1,276",
change: "+9.6%",
caption: "vs last campaign",
trend: "up",
icon: Check,
iconClassName: "bg-success-lighter text-success",
},
];
export default function Stat2() {
return (
<div className="px-6 py-10 max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
{stats.map((stat) => {
const Icon = stat.icon;
return (
<Card
key={stat.label}
className="bg-default border-subtle p-6 rounded-xl"
>
<div className="flex items-center justify-between mb-4">
<span className="text-sm text-muted">{stat.label}</span>
<div className={cn("p-2 rounded-lg", stat.iconClassName)}>
<Icon className="size-5" />
</div>
</div>
<Text
size="3xl"
fontWeight="semibold"
className="text-default mb-3"
>
{stat.value}
</Text>
<div className="text-sm flex items-center">
<span
className={cn(
"font-medium",
stat.trend === "up" ? "text-success" : "text-danger",
)}
>
{stat.change}
</span>
<span className="ms-2 text-muted">{stat.caption}</span>
</div>
</Card>
);
})}
</div>
);
}"use client";
import {
ArrowDown,
ArrowUp,
CircleDollarSign,
ShoppingBag,
Users,
Zap,
} from "lucide-react";
import { Card } from "@hummingbirdui/react";
import { cn } from "@hummingbirdui/react/utils";
const stats = [
{
label: "Total Revenue",
value: "$30,452",
change: "12%",
trend: "up",
caption: "Last period comparison",
icon: CircleDollarSign,
iconClassName: "text-primary",
iconBgClassName: "bg-primary-lighter",
},
{
label: "Active Users",
value: "12,543",
change: "5.4%",
trend: "up",
caption: "Last 7 days activity",
icon: Users,
iconClassName: "text-secondary",
iconBgClassName: "bg-secondary-lighter",
},
{
label: "Avg. Latency",
value: "142ms",
change: "2.1%",
trend: "down",
caption: "System performance",
icon: Zap,
iconClassName: "text-warning",
iconBgClassName: "bg-warning-lighter",
},
{
label: "Conversions",
value: "3.8%",
change: "12.5%",
trend: "up",
caption: "Current funnel data",
icon: ShoppingBag,
iconClassName: "text-success",
iconBgClassName: "bg-success-lighter",
},
];
export default function Stat3() {
return (
<div className="px-6 py-10 max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
{stats.map((stat) => {
const Icon = stat.icon;
const TrendIcon = stat.trend === "up" ? ArrowUp : ArrowDown;
return (
<Card
key={stat.label}
className="border-subtle rounded-xl overflow-hidden"
>
<div className="p-6 bg-default">
<div className="flex items-center gap-2 mb-3">
<div
className={cn(
"p-2 rounded-lg shrink-0",
stat.iconBgClassName,
)}
>
<Icon className={cn("size-4", stat.iconClassName)} />
</div>
<span className="text-sm text-muted">{stat.label}</span>
</div>
<div className="flex items-baseline">
<div className="text-2xl font-semibold text-default">
{stat.value}
</div>
<div
className={cn(
"ms-2 flex items-baseline text-sm font-semibold",
stat.trend === "up" ? "text-success" : "text-danger",
)}
>
{stat.change}
<TrendIcon className="size-3" strokeWidth={2.5} />
</div>
</div>
</div>
<div className="px-6 py-4 border-t border-subtle flex justify-between">
<span className="text-subtle font-medium">{stat.caption}</span>
<a href="#" className="font-semibold no-underline">
Details
</a>
</div>
</Card>
);
})}
</div>
);
}"use client";
import { ArrowUp } from "lucide-react";
import { Badge, Card, Progress, Text } from "@hummingbirdui/react";
import { cn } from "@hummingbirdui/react/utils";
const volumeBars = ["h-4", "h-6", "h-8", "h-10", "h-7", "h-4"];
export default function Stat4() {
return (
<div className="px-6 py-10 max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<Card className="p-6 border-subtle rounded-2xl">
<div className="flex justify-between items-start mb-6">
<Text
size="xs"
fontWeight="semibold"
className="text-subtle uppercase mb-0"
>
Portfolio Value
</Text>
<div className="size-2 rounded-full bg-primary animate-pulse" />
</div>
<Text
as="h3"
size="4xl"
fontWeight="semibold"
className="text-default mb-10"
>
$248,500
</Text>
<div className="flex items-center gap-2 text-xs text-subtle">
<Badge
variant="subtle"
color="success"
size="md"
className="border-0 self-start"
>
<ArrowUp className="size-3" strokeWidth={2.5} />
12.5%
</Badge>
Since last month
</div>
</Card>
<Card className="p-6 border-subtle rounded-2xl">
<Text
size="xs"
fontWeight="semibold"
className="text-subtle uppercase mb-6"
>
24h Trade Volume
</Text>
<Text as="h3" size="4xl" fontWeight="semibold" className="text-default">
$12.4k
</Text>
<div className="flex items-end gap-1 h-8 mt-auto">
{volumeBars.map((height, index) => (
<div
key={index}
className={cn(
"flex-1 rounded-md",
index === 3 ? "bg-primary" : "bg-muted",
height,
)}
/>
))}
</div>
</Card>
<Card className="p-6 bg-primary rounded-2xl border-0">
<Text
size="xs"
fontWeight="semibold"
className="text-white uppercase mb-6"
>
Est. APY Yield
</Text>
<Text as="h3" size="4xl" fontWeight="semibold" className="text-white">
8.42%
</Text>
<Text size="sm" fontWeight="medium" className="text-white mt-auto mb-0">
Auto-compounding
</Text>
</Card>
<Card className="p-6 border-subtle rounded-2xl">
<Text
size="xs"
fontWeight="semibold"
className="text-subtle uppercase mb-6"
>
Network Status
</Text>
<div className="flex items-center justify-between mb-1">
<span className="text-muted text-sm font-medium">Uptime</span>
<span className="text-success text-sm font-medium">32%</span>
</div>
<Progress value={32} aria-label="Uptime" className="h-2 rounded-xs">
<Progress.Bar color="success" />
</Progress>
<div className="flex items-center justify-between mt-auto">
<span className="text-muted text-sm font-medium">Latency</span>
<span className="text-subtle text-sm font-medium">42ms</span>
</div>
</Card>
</div>
);
}"use client";
import { Star } from "lucide-react";
import { Avatar, Card, Progress, Text } from "@hummingbirdui/react";
const volumeSegments = [
"bg-success/20",
"bg-success/40",
"bg-success/60",
"bg-success",
];
const avatars = [
"/images/avatar/avatar_1.webp",
"/images/avatar/avatar_2.webp",
"/images/avatar/avatar_3.webp",
"/images/avatar/avatar_4.webp",
];
export default function Stat5() {
return (
<div className="px-6 py-10 max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<Card className="p-6 rounded-2xl border-subtle">
<Text
size="xs"
fontWeight="semibold"
className="text-subtle uppercase mb-4"
>
Gross Volume
</Text>
<div className="flex items-end gap-2 mb-12">
<span className="text-3xl font-semibold text-default tabular-nums">
$42.8K
</span>
<span className="mb-1 text-sm font-semibold text-success">12%↑</span>
</div>
<div className="flex gap-1">
{volumeSegments.map((segment) => (
<div
key={segment}
className={`flex-1 h-2 rounded-full ${segment}`}
/>
))}
</div>
</Card>
<Card className="p-6 rounded-2xl border-subtle">
<Text
size="xs"
fontWeight="semibold"
className="text-subtle uppercase mb-4"
>
New Customers
</Text>
<div className="flex items-end gap-2 mb-6">
<span className="text-3xl font-semibold text-default tabular-nums">
1,248
</span>
<span className="mb-1 text-sm font-semibold text-primary">+18</span>
</div>
<Avatar.Group className="ms-2">
{avatars.map((src) => (
<Avatar key={src} size="xs" className="shrink-0">
<Avatar.Image src={src} alt="Avatar" />
</Avatar>
))}
<Avatar size="xs" className="shrink-0">
<Avatar.Fallback className="bg-primary text-base">
<span className="text-xs">+14</span>
</Avatar.Fallback>
</Avatar>
<span className="text-xs self-center ms-2 font-medium text-subtle truncate">
Joined Today
</span>
</Avatar.Group>
</Card>
<Card className="p-6 rounded-2xl border-subtle">
<Text
size="xs"
fontWeight="semibold"
className="text-subtle uppercase mb-4"
>
Server Load
</Text>
<span className="text-3xl font-semibold text-default tabular-nums">
24<span className="text-sm text-subtle">%</span>
</span>
<Progress
value={24}
aria-label="Server load"
className="mt-auto h-1.5 mb-1.5"
/>
<span className="text-xs font-medium text-subtle">Optimal Range</span>
</Card>
<Card className="p-6 rounded-2xl border-subtle">
<Text
size="xs"
fontWeight="semibold"
className="text-subtle uppercase flex items-center gap-2 mb-4"
>
<span className="relative flex size-1.75 mb-0.5">
<span className="animate-ping absolute inline-flex size-full rounded-full bg-primary opacity-75" />
<span className="inline-flex rounded-full size-1.75 bg-primary" />
</span>
User CAST
</Text>
<span className="text-3xl font-semibold text-default tabular-nums">
4.9<span className="text-sm text-subtle">/ 5.0</span>
</span>
<div className="flex gap-0.5 mt-auto">
<Star className="size-4 text-warning" fill="currentColor" />
<span className="text-xs font-medium text-subtle ms-1">
Top 1% Percentile
</span>
</div>
</Card>
</div>
);
}