Skip to content

Components · Reference

Stats Card

A compact metric card with title, icon, value, description, optional content, and card-link hover affordances.

Overview

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.

Install

shell
bunx shadcn@latest add @krak-stack/stats-card

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>
Dependencies
Packages and shadcn components required by this registry item.

Dependencies

Registry Dependencies