The HealthStatCard component is a modern, reusable, and fully customizable Shadcn UI–based card designed for displaying health and performance metrics in an engaging, data-driven way. Built with Framer Motion for smooth, spring-based animations and Shadcn tooltips for contextual insights, it features bubble-style bars that animate in 3D on hover to make data visualization more interactive and appealing. Each bar can display a tooltip with a short description and value, making it perfect for dashboards that track metrics such as sleep quality, hydration, fitness, nutrition, or productivity. With flexible props for configuring icons, statistics, colors, legends, and animations, this component provides a clean, professional, and visually rich way to represent health-related data across any Next.js application.
import { Dumbbell } from "lucide-react"
import { HealthStatCard } from "@/components/ui/health-stat-card"
export default function DemoHealthStats() {
const stats = [
{ title: "Sleep", value: 7.5, unit: "h", changePercent: 5, changeDirection: "up" },
{ title: "Hydration", value: 2.3, unit: "L", changePercent: -3, changeDirection: "down" },
{ title: "Steps", value: 10400, unit: "", changePercent: 8, changeDirection: "up" },
]
const graphData = [
{ label: "Deep Sleep", value: 80, color: "#3B82F6", description: "Time in restorative sleep" },
{ label: "Hydration", value: 65, color: "#22C55E", description: "Water intake level" },
{ label: "Exercise", value: 55, color: "#F59E0B", description: "Active minutes today" },
{ label: "Nutrition", value: 90, color: "#EF4444", description: "Daily nutrition goal met" },
]
return (
<div className="flex justify-center py-10">
<HealthStatCard
headerIcon={<Dumbbell className="h-6 w-6" />}
title="Daily Health Overview"
stats={stats}
graphData={graphData}
graphHeight={120}
/>
</div>
)
}
Part of Ruixen UI — browse the full library on 21st.dev.