Components
Stats Card
A compact metric card with title, icon, value, description, optional content, and card-link hover affordances.
Install
Add this registry item to your app with shadcn.
bash
bunx --bun shadcn@latest add https://krakstack.net/r/stats-card.jsonOverview
StatsCard displays a key metric with a title, icon, value, and short description. It accepts optional children for inline charts or supporting content and works inside card-link groups through its hover classes.
Usage
tsx
import { StatsCard } from "@/components/ui/stats-card";
import { Users } from "lucide-react";
<StatsCard
title="Users"
value={128}
description="Active users this month"
icon={<Users />}
/>Linked Card
Wrap the card in a link with group/card-link to enable its hover affordances.
tsx
import { StatsCard } from "@/components/ui/stats-card";
import { Link } from "@tanstack/react-router";
import { Database } from "lucide-react";
<Link to="/admin/courses" className="group/card-link min-w-0">
<StatsCard
title="Storage"
value={formatBytes(stats.storageUsedBytes)}
description="Storage used by this organization."
icon={<Database />}
/>
</Link>