Components
Loading preview...
The HealthStatCard component is a beautifully designed, interactive, and reusable UI card built using Shadcn UI and Framer Motion. It is perfect for displaying health, fitness, or performance-related statistics in a visually engaging way. The card features smooth animations, rounded “bubble-style” bars with 3D hover effects, and an optional tooltip that provides detailed information about each data point. You can configure the title, icon, stats, graph data, legend visibility, and even customize tooltip descriptions for each bar. This makes it ideal for use in dashboards, wellness apps, or analytics pages where users can easily visualize and interpret progress trends at a glance.
npx shadcn@latest add https://21st.dev/r/ruhith369/health-stat-card"use client";
import * as React from "react";
import { AccessManagerCard, Member } from "@/components/ui/health-stat-card";
import { ShieldCheck } from "lucide-react";
const initialMembers: Member[] = [
{
id: "1",
name: "Walter White",
email: "heisenberg@methlab.com",
avatar: "https://i.pravatar.cc/150?u=walter",
role: "Owner",
},
{
id: "2",
name: "Jesse Pinkman",
email: "yo@bitch.com",
avatar: "https://i.pravatar.cc/150?u=jesse",
role: "Viewer",
},
{
id: "3",
name: "Saul Goodman",
email: "legal@bettercallsaul.com",
avatar: "https://i.pravatar.cc/150?u=saul",
role: "Editor",
},
];
export default function AccessManagerDemo() {
const [members, setMembers] = React.useState<Member[]>(initialMembers);
const handleRoleChange = (id: string, newRole: "Viewer" | "Editor") => {
setMembers((prev) =>
prev.map((m) => (m.id === id ? { ...m, role: newRole } : m))
);
console.log(`${id} changed to ${newRole}`);
};
const handleInvite = (email: string, role: "Viewer" | "Editor") => {
const newMember: Member = {
id: (members.length + 1).toString(),
name: email.split("@")[0],
email,
avatar: `https://i.pravatar.cc/150?u=${email}`,
role,
};
setMembers((prev) => [...prev, newMember]);
console.log(`Invited ${email} as ${role}`);
};
return (
<div className="flex h-full min-h-screen items-center justify-center bg-background p-6">
<AccessManagerCard
title="Project Access"
description="Manage team permissions easily."
folderName="AI Research Docs"
itemCount={48}
members={members}
onInvite={handleInvite}
onRoleChange={handleRoleChange}
folderIcon={<ShieldCheck className="h-6 w-6 text-primary" />}
/>
</div>
);
}